前言

本文将描述如何基于LROP智能模版，使用extension针对性地添加对象页面中的toolbar button以及table。

背景介绍

首先，我们介绍下项目的基本技术栈。为了增强与s4业务的一致性，我们使用CAP CDS智能模板生成通用代码，然后根据不同的开发需求，在LROP模板上添加js extension 脚本来实现。

由于CAP CDS已经通过注解定义了前端的通用表示内容，因此一旦指定了Odata V4数据源，LROP智能模板就会正确地呈现相应的内容，例如list report和object page。

本博客仅用于对象页面介绍，因此可以在objectPageExt控制器中执行一些初始化操作，只要UI5文档指定这些操作可以被覆盖。

App对象页头由CAP CDS生成，其他元素如simulate price按钮、approved按钮、document table等由App Extensions生成。对象页面概述如下所示:以下内容是object page预览以及具体的实现细节。

object page overview

 代码实践

1. 第一步是在本地编辑器，例如VSCode中配置extension属性，并在manifest.json中设置extension的本地文件路径。如下面的代码示例所示。

   "extends": {
         "extensions": {
           "sap.ui.controllerExtensions": {
             "sap.fe.templates.ListReport.ListReportController": {
               "controllerName": "deviation-price.ext.controller.ListReportExt"
             },
             "sap.fe.templates.ObjectPage.ObjectPageController": {
               "controllerName": "deviation-price.ext.controller.ObjectPageExt"
             }
           }
         }
      }​

2. 下面描述三个控件的扩展实现:
   1. simulation price button
      1. 在manifest.json中，找到sap.ui5的rooting属性配置
      2. 添加类似的代码段：

             "routing": {
               "config": {},
               "routes": [
                 {
                   "pattern": ":?query:",
                   "name": "DeviationItemsByPriceList",
                   "target": "DeviationItemsByPriceList"
                 },
                 {
                   "pattern": "DeviationItemsByPriceListNew({key}):?query:",
                   "name": "DeviationItemsByPriceObjectPage",
                   "target": "DeviationItemsByPriceObjectPage"
                 }
               ],
               "targets": {
                 "DeviationItemsByPriceObjectPage": {
                   "type": "Component",
                   "id": "DeviationItemsByPriceObjectPage",
                   "name": "sap.fe.templates.ObjectPage",
                   "options": {
                     "settings": {
                       "entitySet": "DeviationItemsByPriceListNew",
                       "editableHeaderContent": false,
                       "content": {
                         "header": {
                           "actions": {
                             "simulatePriceAction": {
                               "press": "deviation-price.ext.controller.simulatePriceAction.simulatePrice",
                               "enabled": true,
                               "text": "{i18n>simulatePriceButtonText}"
                             }
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }​

   2. documents table
      1. 在manifest.json中，找到sap.ui5的rooting属性配置
      2. 添加类似的代码段：

         "routing": {
               "config": {},
               "routes": [
                 {
                   "pattern": ":?query:",
                   "name": "DeviationItemsByPriceList",
                   "target": "DeviationItemsByPriceList"
                 },
                 {
                   "pattern": "DeviationItemsByPriceListNew({key}):?query:",
                   "name": "DeviationItemsByPriceObjectPage",
                   "target": "DeviationItemsByPriceObjectPage"
                 }
               ],
               "targets": {
                 "DeviationItemsByPriceObjectPage": {
                   "type": "Component",
                   "id": "DeviationItemsByPriceObjectPage",
                   "name": "sap.fe.templates.ObjectPage",
                   "options": {
                     "settings": {
                       "entitySet": "DeviationItemsByPriceListNew",
                       "editableHeaderContent": false,
                       "content": {
                         "body": {
                           "sections": {
                             "documentsTableWithCount": {
                               "type": "XMLFragment",
                               "template": "deviation-price.ext.fragment.ObjectPageInfo"
                             }
                           }
                         }
                       }
                     }
                   }
                 }
               }
             }​

      3. deviation-price.ext.fragment.ObjectPageInfo.fragment.xml代码结构如下所示。在树状表控件中，通过core:require=”{handler: ‘deviation – price/ext/controller/ObjectPageInfo’} “来指定数据处理和格式化的js脚本。

         <core:FragmentDefinition 
             xmlns:core="sap.ui.core" 
             xmlns:l="sap.ui.layout"
             xmlns="sap.ui.table"
             xmlns:mvc="sap.ui.core.mvc"
             xmlns:m="sap.m"
             xmlns:u="sap.ui.unified"
             >
         		<TreeTable
                     id="persoTable"
                     core:require="{handler: 'deviation-price/ext/controller/ObjectPageInfo'}"
                     rows="{path:'testModel>/', parameters: {arrayNames:['selfBillingDocumentItemList']}}"
                     selectionMode="MultiToggle"
                     enableSelectAll="true"
                     selectionBehavior="RowSelector"
                     rowSelectionChange='handler.rowSelectionChangeFun'
                     ariaLabelledBy="title">
                     <extension>
                         <m:OverflowToolbar style="Clear">
                             <m:Title id="title" text="{i18n>documents}"/>
                             <m:ToolbarSpacer/>
                             <m:Button id='approveButton' text="{i18n>approve}" press="handler.onApprove" enabled='false'/>
                         </m:OverflowToolbar>
                     </extension>
                     <columns>
                     </columns>
                 </TreeTable>
         </core:FragmentDefinition>​

   3. aproved button
      1. 通过通用的表工具栏toolbar添加

应该特别注意objectpage header中审批状态的刷新。在我们的表可以选中某一个单子，点击approve button完成审批操作，当所有单子都被批准时，应该对header执行部分ajax刷新。下面是一段有效的代码。

let approvedId = this.byId(
'deviation-price::DeviationItemsByPriceObjectPage--fe::HeaderFacetContainer::approved');
let approvedIdContext = approvedId.getBindingContext();
if (!approvedIdContext.hasPendingChanges()) {
      approvedIdContext.refresh();
    }

后记

本文简单描述了如何基于LROP智能模版，使用extension针对性地添加对象页面中的toolbar button以及table。如果您对本博客感兴趣，欢迎在下方留言讨论！更多资讯欢迎关注我的主页Hogan He！更多UI5技术博客欢迎访问UI5博客汇总