通过SAP Build快速构建UI5原型App

SAP Build是一个非常不错的快速构建高保真UI5应用的服务，可以免费注册使用。

在设计驱动开发的流程中，App的设计是非常重要的步骤，通过低保真、高保真的设计原型可以快速获取用户的反馈，然后快速调整原型，提高沟通的效率，最大程度节约开发资源。

https://www.build.me/

通过Build服务，可以快速构建UI5的高保真UI，然后根据设计，也可以直接生成可以运行的代码，我个人非常喜欢。今天通过一个小例子来看一下如何通过SAP Build来快速构建UI5原型App。

SAP Sales Order Tracker

SAP Sales Order Tracker是SAP标准的产品功能，可以帮助企业的销售人员来实时监控销售订单的交付状态。

界面大致如下：

下面就从模仿这个SAP标准的界面来练习一下。

SAP Build

在Build.me的网站上免费注册一个账户。

然后创建一个项目，创建一个Prototype。

选择一个模板，我选择了List Report。

创建一个数据对象，SalesOrders:

通过拖拉的方式编辑列表的每一个列信息，InOrder这一列是一个定制列，里面放了一个图标：

下面选择Share分享，下载自动生成的代码。

SAP WebIDE

将代码导入到SAP WebIDE。

选择testFLPServiceMockServer.html可以直接运行应用。

修改代码

<ColumnListItem type="Active">
    <cells>
        <ObjectIdentifier title="{ID}" text=""/>
        <HBox alignItems="Stretch" justifyContent="End" alignContent="Stretch">
            <items>
                <ObjectNumber number="{path:'Amount', formatter:'.formatFractionDigitFromValue'}" unit="{Unit}" emphasized="false"/>
            items>
        HBox>
        <ObjectStatus text="{Customer}" width="auto"/>
        <ObjectStatus text="{Date}" width="auto"/>
        <ObjectStatus text="{Overall}" width="auto"/>
        <ObjectStatus text="{Process}" width="auto"/>
        <core:Icon src="{= ${InOrder} === 'C' ? 'sap-icon://complete' : (${InOrder} === 'E' ? 'sap-icon://error' : 'sap-icon://message-warning')}" size="24px" color="{= ${InOrder} === 'C' ? 'green' : ( ${InOrder} === 'E' ? 'red' : 'grey')}" height="24px" width="48px" visible="true"/>
        <ObjectStatus text="{InSupply}" width="auto"/>
        <ObjectStatus text="{InDelivery}" width="auto"/>
        <ObjectStatus text="{InTransit}" width="auto"/>
        <ObjectStatus text="{InInvoice}" width="auto"/>
        <ObjectStatus text="{InAccounting}" width="auto"/>
    cells>
ColumnListItem>

我通过UI5的Expression Binding来根据字段内容来显示不同的图标。

运行程序

显示如下：

其它列也可以以此类推这样去实现。

小结

通过SAP Build先快速设计app的原型，可以直接生成可运行的代码，然后导入到SAP WebIDE后，做一些调整和修改，可以大幅提高开发效率，降低TCO。