Sap Fiori Basics Part 2

We defined a button on the screen, selected the type and entered the text. We also removed the definitions of the combobox.

We will bind the model to the screen and to the combobox in order to read the parameter attached to the model. To do this, we will edit the Manifest.json file. The models defined in the Manifest.json can be accessed from all controllers. We define them under the Models tab in the Manifest.json file. We defined the main model using the JSON library of SAP.

We debugged the button press.

The oData came empty from the combobox.

We bound the model to the combobox using the syntax “{ModelName>/ParameterName}” and the selectedKey property, which means “select the key that is written here.”

After binding the model, the oData was filled this time.

We can also read the properties of City in this way.

We wrote the code we typed in the console inside a function that will give an alert on the screen. Generally, keys are sent to SAP.

In Fiori, which devices the application will appear on is set in the “deviceTypes” section of the manifest.json file.

We can add additional CSS.

We added the “l” and “fb” prefixes to the library definitions in the Mainview.Xml file.

xmlns:l="sap.ui.layout" 
        xmlns:fb="sap.ui.comp.filterbar"

We removed the Combobox and added this filter bar.

<l:VerticalLayout width="100%">
        <Label text="FilterBar"/>
        <fb:FilterBar reset="onReset" search="onSearch" showRestoreButton="true" showClearButton="true">
            <fb:filterGroupItems>
                <fb:FilterGroupItem groupName="__$INTERNAL$" name="A" label="Delivery Date" partOfCurrentVariant="true" visibleInFilterBar="true">
                    <fb:control>
                        <DatePicker/>
                    </fb:control>
                </fb:FilterGroupItem>
                <fb:FilterGroupItem groupName="__$INTERNAL$" name="B" label="Region" labelTooltip="Tooltip Example" mandatory="true" partOfCurrentVariant="true" visibleInFilterBar="true">
                    <fb:control>
                        <ComboBox type="Text">
                            <items>
                                <core:Item key="001" text="EMEA"/>
                                <core:Item key="002" text="America"/>
                                <core:Item key="003" text="APJ"/>
                            </items>
                        </ComboBox>
                    </fb:control>
                </fb:FilterGroupItem>
                <fb:FilterGroupItem groupName="G1" groupTitle="Group1" name="A1" label="Company" labelTooltip="Tooltip GroupItem Example">
                    <fb:control>
                        <Input type="Text"/>
                    </fb:control>
                </fb:FilterGroupItem>
                <fb:FilterGroupItem groupName="G1" groupTitle="Group1" name="B1" label="Customer">
                    <fb:control>
                        <Input type="Text"/>
                    </fb:control>
                </fb:FilterGroupItem>
                <fb:FilterGroupItem groupName="G2" groupTitle="Group2" name="A2" label="Supplier" labelTooltip="Tooltip GroupItem Example">
                    <fb:control>
                        <Input type="Text"/>
                    </fb:control>
                </fb:FilterGroupItem>
                <fb:FilterGroupItem groupName="G2" groupTitle="Group2" name="B2" label="Category">
                    <fb:control>
                        <Input type="Text"/>
                    </fb:control>
                </fb:FilterGroupItem>
            </fb:filterGroupItems>
        </fb:FilterBar>
    </l:VerticalLayout>

If there are functions in the XML file that are not in the controller, it does not give an error.

For convenience, we define a separate model for filtering in the Manifest.json file if there will be multiple bindings on more than one page.

If data is going to be entered, naming such as Date1, Date2, and Date3 can be used.

By using the “visibleInFilterBar” property, we can control whether it is shown in the filter tab or not.

If we set it to false, it will not be shown like this:

<fb:FilterGroupItem groupName="__$INTERNAL$" name="B" label="Region" labelTooltip="Tooltip Example" mandatory="true" partOfCurrentVariant="true" visibleInFilterBar="false">

When we triggered the debug without entering data, it came up empty.

When we entered data, we used oModel.getData() to see the data we entered in the debug.

If we do not add anything to the beginning of the binding structure, it means we are using the default model.

Default Model defined like that.

Default model called like that.