Create UI & Integrate OData in UI5 Application on BAS for CAPM Full Stack UI5 Development

[kachiever]

Welcome to the Sixth Episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS with a project structure for development, created entities and exposed Odata services. In this episode, we will create a Table in UI, do READ Operation on our Odata service & bind the fetched Data in the created table.

Assumption(OR Must Have to Start):

• You have followed our previous episode where we created the UI application.

Your project structure should look like below if you carefully followed all our previous episodes.

Now, First Do npm install to make sure all required node modules get downloaded.

npm install

So, you should see something like this in the terminal. All the required modules are installed now.

Now, let's see what we have made till now. Let's do cds watch to run the application.

cds watch

We will get a pop-up to Expose & open, click on it & we should get the screen something like below:

Now, click on the Web Application & we will be Navigated to our Application. We will see a blank Application with Title we added.

Now, let's tinker with the UI to show some Data. Lets, navigate to the Home View, you should see the default code like below.

Refer to the below screenshot & select the code in Blue & replace it with the below code.

    <Shell id="shell">

        <App id="app">

            <pages>

                <Page id="page" title="{i18n>title}">

                    <content>

                        <Table items="{mainModel>/SalesOrder}" id="table0" mode="SingleSelectLeft" selectionChange="onSelect">

                            <headerToolbar>

                                <OverflowToolbar>

                                    <content>

                                        <ToolbarSpacer />

                                        <SearchField id="searchField" width="20%" placeholder="search" search=".onSearch" />

                                        <Button id="createButton" icon="sap-icon://add" tooltip="Create" visible="true" press="onOpenAddDialog">

                                            <layoutData>

                                                <OverflowToolbarLayoutData priority="NeverOverflow" />

                                            </layoutData>

                                        </Button>

                                        <Button id="deleteButton" icon="sap-icon://delete" tooltip="Delete" visible="false" press="onDelete">

                                            <layoutData>

                                                <OverflowToolbarLayoutData priority="NeverOverflow" />

                                            </layoutData>

                                        </Button>



                                        <Button id="saveButton" text="Save" type="Emphasized" visible="false" enabled="true" press="onSave" />

                                        <Button id="editModeButton" visible="true" icon="sap-icon://edit" tooltip="Edit" press="onEditMode">

                                            <layoutData>

                                                <OverflowToolbarLayoutData priority="NeverOverflow" />

                                            </layoutData>

                                        </Button>



                                    </content>

                                    <dependents>

                                        <Dialog id="OpenDialog" title="Create Sales Order">

                                            <buttons>

                                                <Button id="confirmCreate" text="Create" press=".onCreate" type="Emphasized" />

                                                <Button id="cancelCreate" text="Cancel" press="onCancelDialog" type="Transparent" />

                                            </buttons>

                                            <form:SimpleForm editable="true" layout="ResponsiveGridLayout">

                                                <form:content>

                                                    <Label text="SO Number" required="true" />

                                                    <Input id="idSo" change="onNameChange" />

                                                    <Label text="Customer Name" />

                                                    <Input id="idCustName" rows="4" />

                                                    <Label text="Customer Number" />

                                                    <Input id="idCustomer" rows="4" />

                                                    <Label text="Po Number" />

                                                    <Input id="idPo" rows="4" />

                                                    <Label text="Inquiry Number" />

                                                    <Input id="idInqNumber" rows="4" />

                                                </form:content>

                                            </form:SimpleForm>

                                        </Dialog>

                                    </dependents>



                                </OverflowToolbar>

                            </headerToolbar>

                            <items>

                                <ColumnListItem type="Active" id="item0">

                                    <cells>

                                        <Text id="id1" text="{mainModel>soNumber}"/>

                                        <Text id="id2" text="{mainModel>customerName}"/>

                                        <Text id="id3" text="{mainModel>customerNumber}"/>

                                        <Text id="id4" text="{mainModel>PoNumber}"/>

                                        <Text id="id5" text="{mainModel>inquiryNumber}"/>

                                        <Button id="id6" icon="sap-icon://edit" onPress="onSelect" />

                                    </cells>

                                </ColumnListItem>

                            </items>

                            <columns>

                                <Column>

                                    <header>

                                        <Label text="So Number" />

                                    </header>

                                </Column>

                                <Column>

                                    <header>

                                        <Label text="Customer Name" />

                                    </header>

                                </Column>

                                <Column>

                                    <header>

                                        <Label text="Customer Number" />

                                    </header>

                                </Column>

                                <Column>

                                    <header>

                                        <Label text="PO Number" />

                                    </header>

                                </Column>

                                <Column>

                                    <header>

                                        <Label text="Inquiry Number" />

                                    </header>

                                </Column>

                            </columns>

                        </Table>

                    </content>

                </Page>

            </pages>

        </App>

    </Shell>

Finally, your code should look something like below.

Note : We are assuming you are an existing UI5 Developer, so not explaining the code but focusing more on the integration & CRUD operations in CAPM.

Do a Save All in the File Menu to save all your changes.

We don't need any logic as of now so will go to Manifest.json to declare the Model. We are using OData V4 Model. We are not declaring Data Source as it will be auto declared as we choose it in the Wizard Mode.

Copy & Replace the selected code with the below code.

 "mainModel": {

                "type": "sap.ui.model.odata.v4.ODataModel",

                "dataSource": "mainService",

                "preload": true,

                "settings": {

                    "synchronizationMode": "None",

                    "operationMode": "Server",

                    "autoExpandSelect": true,

                    "earlyRequests": true,

                    "groupId": "$auto"

                }

            }

        },

It should look something like below.

Now, let's bind it to our table. So, navigate to the Home View & add the below snippet.

items="{mainModel>/SalesOrder}"

And the below snippet to bind fields

<Text id="id1" text="{mainModel>soNumber}"/>

<Text id="id2" text="{mainModel>customerName}"/>

<Text id="id3" text="{mainModel>customerNumber}"/>

<Text id="id4" text="{mainModel>PoNumber}"/>

<Text id="id5" text="{mainModel>inquiryNumber}"/>

;

Now let's save All as done above & do cds watch to see the final output. You should get the Fiori application as below, showing the Table with Data fetched from CAPM Odata V4 Service.

Feel free to drop your comments in the comment section.

In this blog post we have learnt how to set up a dev-space in Business Application Studio(BAS).

In the next blog post we will see how to do Create & Delete Operation in SAPUI5 Application in BAS.

Further reading – https://cap.cloud.sap/docs/guides/

Next Episode: Do OData Create & Delete Operation in UI5 Application on BAS for CAPM Full Stack UI5 Development