Skip to Content
Technical Articles
Author's profile photo Kapil Verma

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

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):

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

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kapil Verma
      Kapil Verma
      Blog Post Author

      Hi, Someone Posted an Error in the Comments. I deleted it by mistake, really sorry for that. Can you please share the Error again?

      Author's profile photo Gautam Malla
      Gautam Malla

      I think in Home.view.xml, you missed out to declare Form library "xmlns:form="sap.ui.layout.form". It can cause error while loading the app.

      Author's profile photo Dileep Kumar KOSANA
      Dileep Kumar KOSANA

      Hi Gautam Malla ,

      Good Catch.. It helped me to solve once adding Form Class . Thank you.

      Author's profile photo Yogaraj Gunasekaran
      Yogaraj Gunasekaran

      Hi Gautam Malla

      After completing all the steps.I am getting a empty screen preview.

      Do you have any idea?

      Note: I skipped the some steps from the following steps: Now, let’s bind it to our table. So, navigate to the Home View & add the below snippet.

      Because the steps are already there.

      Author's profile photo Gautam Malla
      Gautam Malla

      Check console.

      Author's profile photo David Smith
      David Smith

      I have the same problem.

       

      My only observation is: Although I chose the application type SAPUI5 Freestyle, BAS displayed (changed?) this to SAP Fiori Elements in the Application Details Summary.

       

      I repeated this twice but BAS always displayed as SAP Fiori Elements. Maybe this is the problem.

      Author's profile photo Jacob Binu
      Jacob Binu

      I had the same problem.

      I did the follows:

      1. Deleted the App.view.xml file
      2. Deleted the App.controller.js file
      3. added xmlns:form="sap.ui.layout.form" as suggested by Gautam.
      4. Set the root page to Home as below.
      "rootView": {
                  "viewName": "com.sap.soapp.view.Home",
                  "type": "XML",
                  "async": true,
                  "id": "Home"
              }
      This got it working.