Skip to Content
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.
W5G1.png
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.
W5G2.png

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.
W5G3.png    

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.
W5G4.png
      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.
W5G5.png

    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
W5G6.png

  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

W5G7.png

 

   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.

 

W5G8.png

  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.
W5G9.png
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.
W5G10.png

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Christopher Solomon

    Nice write up! One thing I have always wanted (and maybe I am just unaware of it) is a feature where if I click on an element in the WYSIWYG editor, then I have a little panel or something (tab on existing panel) that will show anywhere in code that the element is referenced and “linked” so I can click on it and jump/navigate to that piece of code.

    (0) 
    1. Elizabeth Gutt Post author

      Hi Christopher,

       

      Thanks for the feedback.

       

      We are constantly improving the layout editor with new features that improve
      the development experience.

      I can understand the value of your request. We will evaluate it and consider adding it to our plans.

          

      Thanks,

      Lisi

      (0) 
            1. Elizabeth Gutt Post author

              Hi Arie,

              There is a local trial installation version. See details here

              Please note that it is a trial version for non-productive usage only

              Regards,

              Lisi

              (0) 
              1. Arie Helman

                Hi Lisi,

                I can’t see many UI components such as tiles , charts and so on.

                The trial version includes partial UI components ?

                Regards,

                Arie.

                (0) 
                1. Elizabeth Gutt Post author

                  Hi Arie,

                  Both the trial and productive versions contain the same set of UI5 controls.

                  Currently not all the UI5 controls are supported in the layout editor, we are adding additional controls in most of our releases.

                  Please note that you can add any control via the xml editor. In the layout editor these controls are marked as “unsupported” and are read only

                  Regards,

                  Lisi

                  (0) 
  2. Rishi Khandelwal

    Very detailed and informative.

    When ever I am opening a xml view with layout editor and selecting the individual element i am keep on getting this error and properties pane is just not opening up.

    I have used the layout editor previously and as suggested cleared the browser cache as well.

    Any help ???

    Error.PNG

    (0) 
    1. Elizabeth Gutt Post author

      Hi Rishi,

      I’m very sorry for the inconvenience you are experiencing with the Layout Editor

      Can you please export your application and send it to me? (by mail)

      We will try to reproduce this issue and fix it

      Regards,

      Lisi

      (0) 
      1. Rishi Khandelwal

        Yes I can do it. But the problem is this issue is coming up in every application I try to open with layout editor.

        Be it a new one or past ones.

        I even created a new account on trial platform thinking i might have done some configuration issues in my existing account , but again same issue crop up here as well.

        Thanks.

        (0) 
      2. Rishi Khandelwal

        Hey Lisi,

        One more thing I tried using the layout editor on different machines and there I can use it without any errors.

        Having this issue on a single laptop is really worrisome.

        Thanks,

        Rishi

        (0) 

Leave a Reply