Neptune DXP Documentation
Neptune DXP - Open Edition · 21

Create an application with templates

In this topic you learn how to start creating an application using the App Designer and get familiar with the SplitApp template that comes with Neptune DXP - Open Edition.

You can follow step-by-step to use a pre-made API or adjust the steps to use an API that you created.

Save your new application any time in the process and return to it later. To continue building your application, open it in the App Designer and click Toggle to edit mode on the top menu.
appdesigner top menu edit

Prerequisites

  • You have installed your Neptune DXP - Open Edition.

  • You have the developer role assigned.

Procedure

Configure an application with a SplitApp template

The SplitApp template is the base for an app with a general Page (Detail Page) and a Master Page.

  • The Detail Page shows information in its entirety.

  • The Master Page is a side menu that shows only key information and helps to navigate through entries of a data table.

    1. Open the cockpit of your Neptune DXP - Open Edition and click App Designer.

      cockpit development appdesigner

    2. In the Cockpit, open the Application drop-down menu and click Create.

    3. In the New App dialog, enter a Name of your choice.

    4. Under Type, select Application.

    5. From the Templates panel, select the SplitApp template and click Save.

      appdesigner template splitapp html

      Result: You see the main designer environment, now with an HTML document consisting of a Shell, an App and two Page components with additional subcomponents. Here, you perform front-end coding. The Master and Detail pages define the two sides of the SplitApp.

    6. On the side menu, click the Settings icon.

      appdesigner side menu settings

      Result: The Application Settings window opens.

    7. In General, enter a Description for your application and a Title.

    8. Under OpenUI5, select an Open UI5 Version, Theme, and Language for your application.

    The preselected Belize theme gives you the most popular look and feel.

    1. On the top menu, click Save.

      appdesigner top side menu save

Result: You have configured your application.

You will start using the App Designer to create an application. To learn more about the panels and functionalities of the App Designer, see App Designer interface at a glance.

Add resources

Now you add data resources to you application. The data is later displayed on the Master Page.

The following steps use the component tree from the Reusable component panel to navigate to components. Instead of using the component tree you can also search for the component in the search field above the Reusable component panel.

appdesigner component search2

  1. On the Reusable component panel, open Resources and drag and drop the RestAPI component onto Resources in the Application component panel.

  2. On the Reusable component panel, drag and drop the MultiModel component onto Resources in the Application component panel.

  3. Click on the RestAPI component.

  4. On the UI object panel, click the Rest API field to open the Rest API library.

  5. Search either your API or SAP Example API (Training).

  6. Click on the operation /CustomerList with the GET Method.

    appdesigner restapi library popup sapexample

  7. On the Component properties panel, open the API tab > Response > 200.

  8. Click the field that matches the operation of your API and select oMultiModel from the list.

  9. On the Model tab, click the setInitLoad field and select online from the list.

  10. On the Application component panel, click oMultiModel.

  11. On the UI object panel, click the Model Source field and, from the Binding pop-up window, select the Property from your API. In our example, that is "/getCustomerListResponse".

Result: You have added an API to the application and bound the data to the MultiModel component.

Create a list on the Master Page

In this step, you bind data from the resources to a list from the Master Page.

  1. On the Application component panel, open oPageMaster and click the oList component.

  2. On the UI object panel, click the icon in the Model Path field.

  3. On the Binding pop-up window, open oMultiModel > getCustomerListResponse > result and select IT_CUSTOMERS.

  4. On the Application component panel, open oList and click the oObjectListItem.

  5. On the Component properties panel, open Properties, go to title and click the connected icon.

    appdesigner componentproperties binding

  6. On the Binding pop-up window, open IT_CUSTOMERS and click the NAME1 property.

  7. On the Application component panel, open oObjectListItem and click on the oObjectAttribute component.

  8. On the Component properties panel, open Properties.

  9. Go to text and click the connected icon.

  10. On the Binding pop-up window, open IT_CUSTOMERS and select the ORTO1 property.

  11. Go to title and enter City.

  12. On the Applications component panel, click the oObjectStatus component.

  13. On the Component properties panel, open Properties, go to text and click the connected icon.

  14. On the Binding pop-up window, select the LAND1 property.

  15. Go to title and enter Country.

  16. On the top menu, click Save and Activate.

    appdesigner top side menu save activate

Preview your application

  • To preview the application in the Application preview panel, click Run in Designer and select Run in Designer.

    appdasigner run preview

    Result: The Application preview panel shows the current version of your application.

  • To preview the application in a new browser tab, click Run on the top menu.

    appdesigner top menu run

    Result: A new tab opens in your browser and shows the current version of your application.

Result

You have created an application to display customer information:

  • You have created an application with the SplitApp template.

  • You have integrated data from an API.

  • You have bound specific properties from the API to the Master Page of your application.

Related topics