SAP UI5 Smart Controls

SAP UI5 Development has become more interesting after Smart Controls came into picture. With Smart Controls one can directly display Odata content by just directly mapping to the entity of the Odata service. There are quite a few smart controls . Some of them mostly used are as below.

sap.ui.comp.smartfield.SmartField:

The Smart field  control interprets metadata that represents entity-relationship models, data types, service capabilities, and annotations in OData services to automatically generate the underlying inner controls and reduce the amount of code needed for developing applications. In some cases, the OData entity is derived from the control’s binding context. The OData entity’s property that is changed or displayed with the control is derived from the control’s value property.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartfield.SmartField

sap.ui.comp.smartform.SmartForm:

The Smart form control renders a form (sap.ui.layout.form.Form). When used with the Smart field control the label is taken from the metadata annotation sap:label if not specified directly.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartform.SmartForm

sap.ui.comp.smarttable.SmartTable:

The SmartTable control creates a table based on OData metadata and the configuration specified. The entitySet attribute must be specified to use the control. This attribute is used to fetch fields from OData metadata, from which columns will be generated; it can also be used to fetch the actual table data.
Based on the tableType property, this control will render a standard, analytical, tree, or responsive table.
Note:
Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smarttable.SmartTable

sap.ui.comp.smartfilterbar.SmartFilterBar:

The SmartFilterBar control uses the OData metadata of an entity in order to create a FilterBar.
Whether a field is visible on the FilterBar, supports type-ahead and value help, for example, is automatically determined. When you use control configurations and group configurations it is possible to configure the FilterBar and adapt it according to your needs.
Note:
Most of the attributes/properties are not dynamic and cannot be changed once the control has been initialized.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartfilterbar.SmartFilterBar

sap.ui.comp.smartvariants.SmartVariantManagement:

The SmartVariantManagement control is a specialization of the VariantManagement control and communicates with the flexibility library that offers SAPUI5 flexibility to manage the variants.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartvariants.SmartVariantManagement

Lets Get Started -> Smart Table with Smart filter Bar and Smart Variant

View code ->

Step – 1

<mvc:View controllerName=”oil.acm.prcngoverviews1.controller.PricingLotList” xmlns=”sap.m”

xmlns:f=”sap.f” xmlns:mvc=”sap.ui.core.mvc”

xmlns:semantic=”sap.f.semantic” xmlns:smartFilterBar=”sap.ui.comp.smartfilterbar”

xmlns:smartTable=”sap.ui.comp.smarttable”

xmlns:footerbar=”sap.ushell.ui.footerbar”

xmlns:smartVariantManagement=”sap.ui.comp.smartvariants”>

<semantic:SemanticPage >

<semantic:titleHeading>

Step- 2

<smartVariantManagement:SmartVariantManagement id=”pageVariantId”

persistencyKey=”oil.acm.prcngoverviews1.controller.PricingLotList”/>

</semantic:titleHeading>

Step-3

<semantic:headerContent>

<smartFilterBar:SmartFilterBar id=”smartFilterBar” enableBasicSearch=”true” showGoOnFB=”true” showFilterConfiguration=”true”
filterBarExpanded=”true” persistencyKey=”oil.acm.prcngoverviews1.controller.PricingLotList.filterbar” showClearButton=”true”
smartVariant=”pageVariantId” search=”onSearch” initialise=”onInitSmartFilterBar” entitySet=”C_TradingContrPricingOverview”
useToolbar=”false”/>
</semantic:headerContent>

Step-4

<semantic:content>

<smartTable:SmartTable id=”idPricingLotTable” entitySet=”C_TradingContrPricingOverview” smartFilterId=”smartFilterBar”
tableType=”ResponsiveTable” exportType=”GW” useExportToExcel=”true” useVariantManagement=”true” useTablePersonalisation=”true”
placeToolbarInTable=”true” smartVariant=”pageVariantId” persistencyKey=”oil.acm.prcngoverviews1.controller.PricingLotList.table”
header=”{i18n>worklistTableTitle}” showRowCount=”true” demandPopin=”true”
“>

<Table growing=”true” growingScrollToLoad=”true” growingThreshold=”30″ mode=”MultiSelect” sticky=”ColumnHeaders,HeaderToolbar”>

<ColumnListItem type=”Navigation” press=”onPressContract”/>
</Table>

</smartTable:SmartTable>

</semantic:content>

</semantic:SemanticPage>
</mvc:View>

Learnings:

1 – The smartFilter id used in the Smart filter bar is same as The Id of the Smart filter bar.
When we do this the filtering on the Smart Table happens automatically when we press GO on the Smart filter Bar.

2 -The value of the smartVariant property for both Smart Table and SMart filter bar is “pageVariantId” which is the id of Smart Variant Managmeny Control.

Smart Form :

https://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smartform.SmartForm

View Code :

Step – 1

<smartForm:SmartForm id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails” EntityType=”EntityTypeName”>
<smartForm:layout>
<smartForm:ColumnLayout columnsM=”2″ columnsL=”3″ columnsXL=”4″/>
</smartForm:layout>

Step – 2

<smartForm:Group id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.DetailsComponent” label=”{i18n>details}”>

Step – 3

<smartForm:GroupElement id=”oil.acm.sttlmntwrkcenters1.settlementUnit.headerDetails.DPQSinSettlementIndicator_”>

Step – 4

<smartField:SmartField id=”oil.acm.sttlmntwrkcenters1.settlementUnit.headerDetails.DPQSinSettlementIndicator”
value=”{DPQSinSettlementIndicator}”/>

</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementIsCounterpartyReview_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementIsCounterpartyReview”
value=”{SettlementIsCounterpartyReview}”/>
</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementGroupTranslationDate_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementGroupTranslationDate”
value=”{SettlementGroupTranslationDate}”/>
</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.PrmtHbPaymentMethod_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.PrmtHbPaymentMethod” value=”{PrmtHbPaymentMethod}”/>
</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.StopSettlementIsRelease_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.StopSettlementIsRelease”
value=”{StopSettlementIsRelease}”/>
</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.ReasonCode_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.ReasonCode” value=”{ReasonCode}”/>

</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.ThresholdPercentage_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.ThresholdPercentage” value=”{ThresholdPercentage}”/>

</smartForm:GroupElement>

</smartForm:Group>

<smartForm:Group id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.DeliveryComponent” label=”{i18n>termsOfPayment}”>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementGroupPaymentTerms_”>
<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.SettlementGroupPaymentTerms”
value=”{SettlementGroupPaymentTerms}”/>
</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.Incoterms_”>

<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.Incoterms” value=”{Incoterms}”/>

</smartForm:GroupElement>

<smartForm:GroupElement id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.IncotermsPart2_”>

<smartField:SmartField id=”oil.acm.sttlmntapprvlqueues1.settlementGroup.headerDetails.IncotermsPart2″ value=”{IncotermsPart2}”/>

</smartForm:GroupElement>

</smartForm:Group>
</smartForm:SmartForm>

I hope this helps you to understand smart controls and if you consider the following four things, you should be successful:

1- Smart form has Groups. Groups have Group Element. Inside Group Element we use Smart Field Control.

2 – You can use other normal controls inside Group Element along with Smart Field.

3 – Smart Field Control uses “Value” property to show the Label and Value of the Property from the  metdata entity.

4- Smart form uses Entity Type property to link to the EntityType in the Metadata. If you just use “Binding” property , it will bind the Smart form to that association.