Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Lisi
Advisor
Advisor

The layout editor makes developing SAPUI5 applications even faster and simpler for you!


The layout editor has the following areas:


  • Palette: Contains the SAPUI5 controls. Expand Expand or collapse the sections by clicking the arrows, and then
    you can drag
    and drop the controls to the canvas.

  • Canvas: Displays the content of the XML view in a way that closely corresponds to how it will appear in your finished
    application.

  • Properties/Data: Shows the properties’ values and data binding of a selected control.

  • Outline pane: Displays the outline of your XML view.




The SAP Web IDE layout editor SAP Web IDE Developer Guide guides you through the process of creating an SAP Fiori starter
application and enriching it with additional controls in just a few minutes.

So without further ado, let’s just try it!


Before You Start


  1. Create the OData model file SalesOrderService_metadata.xml and store on your computer. Copy the content of the XML file from the following document: OData Model for a Simple Sales Order Service

  2. Run latest version of Google Chrome.

  3. If you already worked with SAP Web IDE in a former release, we recommend you clear your browser cache
    before starting SAP Web IDE.
    Open Google Chrome (the layout editor only runs in this browser) and clear the browser cache.

  4. Start SAP Web IDE in Google Chrome.



Create an Application for Sales Order Tracking


  1. Choose File -> New -> Project from template

  2. On the Template Selection step, choose SAP Fiori Master Detail Application and choose Next

  3. On the Basic Information step, enter the project name (e.g. SalesOrders) and choose Next.

  4. On the Data Connection step, do the following:

  5. Choose File System and Browse.

  6. In the Open dialog, browse to your localSalesOrderService_metadata.xml file and choose Open.

  7. Choose Next.

  8. On the Template Customization step, enter the following mapping data:



Master Section:






























Field Value
Title Sales Orders
OData Collection SalesOrders
Item Title SalesOrderNumber
Numeric Attribute TotalAmount
Units Attribute Currency



Detail Section:


































Field Value
Title Sales Order
Detail Text Sales Order Details
Status Attribute Status
Attribute 1 NetPriceAmount
Attribute 2 TaxAmount
Attribute 3 OrderDate



  1. Choose Next.

  2. On the Confirmation step, choose Finish.



Now the Exciting New Part: Edit Your Application with the Layout Editor


  1. Go to your new project, expand the view folder and select Detail.view.xml.

  2. Open the context menu; choose Open With -> Layout Editor.The Detail.view.xml opens up in a new tab with layout editor capabilities.

  3. Let’s start with something easy and delete the icon from the bottom bar: Select the control in the canvas and drag it outside of the canvas
    or press
    the Del key.

  4. Now add a new icon tab filter to the icon tab bar.



  • In the palette, expand the Container section. Alternatively you can use the search field and search for example for filter or tab.

  • Drag the IconTabFilter control from the palette to the canvas  and drop it on the information icon.



Hint: While dragging controls to the canvas, the available drop zones are marked in green. Press the <Ctrl> key while dragging to switch to other drop zones.




Edit the Controls you Added

1.      We need to add customer data to our new tab. Let’s change some of the new IconTabFilter control properties:

               a)     In the canvas, select the new tab filter icon.

  b)      In the Properties pane, select Default for the Icon Color property.

  c)      As wedo not need any numbers in our tab, lets delete the default value of the Count property.

  d)     Change the value of the Icon property to sap-icon://customer and the value of the Text property to Customer.

    

Add Content to the New Icon Tab Filter

1.      In the palette, expand the Layout section or search for the simple form via the Search field.
2.      Select the new IconTabFilter in the canvas, drag the SimpleForm control from the palette to the canvas and drop it on the icon  of the                 new tab filter.
You should see a new control with field elements to display customer detailed data.






      Cool! Now we only need to adjust the field elements a bit.



3.      In the canvas, select the title in the simple form.
4.      In the Properties pane change the value of the Text field to Customer Details.

Hint: You have to press Enter to make your entries visible in the canvas.



    5. In the canvas, select Label 1 in the simple form.

    6. In the Properties pane change the value of the Text property Sales Organization


  1. In the canvas, select Label 2 in the simple form.

  2. In the Properties pane change the value of the Text property to Sales Organization Name.

  3. Delete the second input field under Sales Organization




 

   Now we need to bind the two input fields to some value.

  1. In the canvas, select the Sales Organization input field in the simple form.

  2. In the properties pane, click on the icon next to the value property.


 



  1. In the Data Binding (Input) dialog, select SalesOrganization from the list of data fields and click OK.

  2. Repeat the procedure for the input field of Sales Organization Name in the simple form but selectSalesOrganizationName .

  3. Finished! Just save your changes.





Let’s check what the result looks like


  1. In your project folder, select the file index.html.

  2. From the context menu, select Run -> Run with Mock Data.

  3. The application preview is started, the application loads and mock data is generated based on the service
    structure you created.









14 Comments