Fiori Element List Report 开发实战4
Fiori Element List Report开发实战4——Object Page开发
上篇文章做出来的效果我个人是不满意的，主要原因是list report默认点击行，是有一个Object
Page的跳转，现在这个跳转是没有东西的，很难看而且json字符串的显示，多少有些变扭。所以我计划把这个页面配置出来。
我们还是需要修改annotation.xml。位置还是这个下面：
首先我们对表头位置进行充填
< Annotation Term = " UI . HeaderInfo " >
< Record Type = " UI . HeaderInfoType " >
< PropertyValue Property = " TypeName " String =
"{@i18n>object_page_title}" />
< PropertyValue Property = " TypeNamePlural " String =
"{@i18n>list_title}" />
< PropertyValue Property = " Title " >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " UUID " />
Record >
PropertyValue >
Record >
Annotation >
这里只会显示一个字段的值，我们放入唯一主键字段UUID来表示抬头。
此外大家应该也注意到，这里string后面的值，是 {@i18n>XXX} ，这样做的好处是，可以在i18n文件夹下配置多语言的文本。 XXX
是语言文件里面的字段。
如果需要生成其他语言的翻译，需要生成其他文件在i18n文件夹下。具体多语言的创建，可以参考以下文章：
https://ui5.sap.com/#/topic/4510c30482da4d438a7e76f991781845
https://ui5.sap.com/#/topic/df86bfbeab0645e5b764ffa488ed57dc
https://ui5.sap.com/#/topic/b8cb649973534f08a6047692f8c6830d
经过上面的操作，我们能看到页面已经发生了变化
接下来我们创建下面页面的展示信息。
上面的东西只能叫大标题，我们继续搬运一些表头的东西进行展示
< Annotation Term = " UI . HeaderFacets " >
< Collection >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Label " String = "{@i18n>base_data}" />
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # PlainText " />
Record >
Collection >
Annotation >
< Annotation Term = " UI . FieldGroup " Qualifier = "PlainText" >
< Record Type = " UI . FieldGroupType " >
< PropertyValue Property = " Data " >
< Collection >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " UUID " />
Record >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ERDAT " />
Record >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " UZEIT " />
Record >
Collection >
PropertyValue >
Record >
Annotation >
这段代码需要上下结合起来理解，首先我们拆分一下，先看这部分：
< Annotation Term = " UI . HeaderFacets " >
< Collection >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Label " String = "{@i18n>base_data}" />
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # PlainText " />
Record >
Collection >
Annotation >
< Annotation Term = " UI . FieldGroup " Qualifier = "PlainText" >
Annotation >
UI.ReferenceFacet下的Target，它的AnnotationPath值指向UI.FieldGroup，但是UI.FieldGroup可能存在多个，我们怎么确定自己要使用哪个UI.FieldGroup呢？#后面的PlainText，就像ABAP
SQL开发中使用的别名，我们是根据这个别名来取数。
后面在定义UI.FieldGroup时，会使用Qualifier来指定这个唯一的别名。
UI.FieldGroupType里面的内容就简单了，这里是我们要进行展示的字段
接下来就是最下方明细的展示了
< Annotation Term = " UI . Facets " >
< Collection >
< Record Type = " UI . CollectionFacet " >
< PropertyValue Property = " Facets " >
< Collection >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # PlainText " />
< PropertyValue Property = " Label " String = "{@i18n>key_data}" />
Record >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # sys " />
< PropertyValue Property = " Label " String = "{@i18n>sys}" />
Record >
Collection >
PropertyValue >
< PropertyValue Property = " Label " String = "{@i18n>base_data2}" />
Record >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # input_json " />
< PropertyValue Property = " Label " String = "{@i18n>Input_json}" />
Record >
< Record Type = " UI . ReferenceFacet " >
< PropertyValue Property = " Target " AnnotationPath = " @ UI .
FieldGroup # Output_json " />
< PropertyValue Property = " Label " String = "{@i18n>out_json}" />
Record >
Collection >
Annotation >
我们这里需要生成3个导航，放在UI.Facets里。
第一导航关键信息，是把两组信息放在一起展示。这里使用UI.CollectionFacet去创建组。导航的描述信息是Label
base_data2。展示的信息组，一个是前面用过的主键，一个是接口的系统相关信息。
第二导航和第三导航，直接指向Json的展示，这里就简单的进行处理，直接使用UI.ReferenceFacet进行设置。
最后我们把上面用到的GROUP维护上
< Annotation Term = " UI . FieldGroup " Qualifier = "input_json" >
< Record Type = " UI . FieldGroupType " >
< PropertyValue Property = " Data " >
< Collection >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZINPUT " />
Record >
Collection >
PropertyValue >
Record >
Annotation >
< Annotation Term = " UI . FieldGroup " Qualifier = "Output_json" >
< Record Type = " UI . FieldGroupType " >
< PropertyValue Property = " Data " >
< Collection >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZOUTPUT " />
Record >
Collection >
PropertyValue >
Record >
Annotation >
< Annotation Term = " UI . FieldGroup " Qualifier = "sys" >
< Record Type = " UI . FieldGroupType " >
< PropertyValue Property = " Data " >
< Collection >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZSYSID " />
Record >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZFM_ID " />
Record >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZFM_NAME " />
Record >
< Record Type = " UI . DataField " >
< PropertyValue Property = " Value " Path = " ZFM_MS " />
Record >
Collection >
PropertyValue >
Record >
Annotation >
页面效果如下
至此，Object page开发基本就结束了。这个位置理论上仍可以进行表行的展示，感兴趣的同事可以阅读这位大佬的文章：
https://blog.csdn.net/qq_40977705/article/details/119444695
。（这篇文章也是站在大佬肩膀上完成的。再次感谢。）
解释下显示表这里的语法。
我们在创建OData的时候，Entity Types可能会创建多个出来，每个Entity Types会有不同的取数，例如取销售订单的时候，一个Entity
Types是负责表头的取值，另一个负责表行。这样在List report外层界面，可以直接展示表头表，跳转到Object
Page后，才显示行表的信息。为了展示正确的表行，这里指定Entity Types对应的Entity Set。
因为这里增加了内容，manifest.json需要同步增加些设置。
注意这三个pages的层级。向导创建的时候，默认是ListReport在最上一级，然后下面是ObjectPage，如果需要在ObjectPage内添加表格，就需要和ObjectPage平级再添加一个pages.
现在回到我们自己的程序中，虽然这个页面大致开发好了，但是还是有许多值得优化的地方。比如Json的展示，看上去宽度受到了限制，并且没有格式化，阅读起来有些困难。
最开始，我计划使用自定义的CSS来搞定这件事情。首先，通过web上的调试，我可以知道field
group生成的表格id。我只需要指定一下就可以实现json一个字段显示满页面的效果：
只能说我想的太美好了。Css中，#开头的字段，代表网页中的id参数，正常优先级排序，它会覆盖sap自己的样式效果的。但是它没有生效。我还以为是我哪里理解错误，就在css中，属性后面加上!important，让它的优先级提升到无穷大。但还是没有用。这是我注意到，SAP自动生成的id，和CSS的关键字起了冲突（小数点和一个冒号、两个冒号）
使用id是受影响最小的方法。如果是使用class属性，会影响所有Fieldgroup的表格样式。
上方图2是禁用了替代css属性参数后，正常的效果。可见这个class的css是影响全局的。
抱着试一试的态度，我去文心一言问了这个问题，它给出的方案是特殊字符前打反斜号。这招非常有用。我的第一个问题解决了。
虽然都是马赛克，但也能看出来，现在json占用了一个单元格。
这是优化后的css，因为inputjson和Outputjson的格式其实是一样的，所以像这样用逗号隔开，写在一起
#intelfacelog\\.zlog\:\:sap\\.suite\\.ui\\.generic\\.template\\.ObjectPage\\.view\\.Details\:\:zlog_etSet
--com\\.sap\\.vocabularies\\.UI\\.v1\\.FieldGroup\:\:input_json\:\:FormGroup-
content ,
#in
...
