ℹ For updates on SAP Web IDE layout editor, please refer to the following SCN documents:

Less Coding, More Designing: The New SAP Web IDE Layout Editor 1.12

SAP Web IDE Layout Editor (WYSIWYG or Drag&Drop) available for productive use

——————

As announced in the Release Notes for SAP Web IDE, SAP Web IDE 1.3 is now available for trial users. This version comes with a nice new feature: The layout editor makes developing HTML5/SAPUI5 applications even faster and simpler for you!

And this is what it looks like:

1-NEW.png

As you can see, the layout editor has the following areas:

  • Palette: Contains the SAPUI5 controls. You can expand or collapse the sections by clicking the arrows, and dragging and dropping the controls to the canvas.
  • Canvas: The content of the XML view is displayed in a way that closely corresponds to how it will appear in your finished application.
  • Properties/Data pane: Shows the properties and data (entity sets and properties of the OData service used by the application) of a marked control.
  • Outline pane: Outline of your XML view (click the icon  in the right side bar to display it).

In the documentation of the SAP Web IDE layout editor you can find a step-by-step tutorial that walks you through the major features the new layout editor offers. It guides you through the process of creating a 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 it locally on your computer. Copy the content of the XML file from the following document: OData Model for a Simple Sales Order Service
  2. In case you already worked with SAP Web IDE with a former release, it’s advising to clear your browser cache before starting SAP Web IDE. So open Google Chrome (the layout editor only runs in this browser) and clear the browser cache.
  3. Start SAP Web IDE in Google Chrome.

Create an Application for Sales Order Tracking

  1. Choose File -> New -> Project
  2. On the Basic Information screen, enter the project name (e.g. SalesOrders) and choose Next.
  3. On the Select a Template screen, choose SAP Fiori Application from the pulldown. Mark SAP Fiori Starter Application and choose Next.
  4. On the Data Connection screen, choose File System and Browse. In the Open dialog, browse to your local SalesOrderService_metadata.xml file and choose Open. On the Data Connection screen choose Next.
  5. On the Template Customizationscreen, enter the following mapping data:

    Master Section:

    Field

    Mapping Data

    Title

    Sales Orders

    OData Collection

    SalesOrders

    Item Title

    SalesOrderNumber

    Numeric Attribute

    TotalAmount

    Units Attribute

    Currency

    Attribute 1

    CustomerID

    Attribute 2

    CustomerName

    Search Field

    SalesOrderNumber

    Detail Section:

    Field

    Mapping Data

    Title

    Sales Order

    Detail Text

    Sales Order Details

    Item Title

    CustomerName

    Numeric Attribute

    SalesOrderNumber

    Units Attribute

    CustomerID

    Attribute 1

    NetPriceAmount

    Attribute 2

    TaxAmount

    Attribute 3

    OrderDate

  6. Choose Next.
  7. On the Confirm screen, 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.
  3. The Detail.view.xml opens up in a new tab with layout editor capabilities. By default, the Outline pane is closed. Although we only need it at the very end of our exercise, you might want to open it up by clicking the icon /wp-content/uploads/2014/09/2_537941.png in the right side bar.
  4. Let’s start with something easy and delete the icon /wp-content/uploads/2014/09/3_537942.png on the bottom bar: Select the control in the canvas and drag it outside of the canvas or press key Del.
  5. Since we want to adjust the icon tab bar, we first have to change some of the properties of the IconTabFilter control.
    1. In the canvas, select the icon of the tab filter.
      In the Outline pane, sap.m.IconTabFilter is selected.
    2. In the Properties/Data pane, expand the Properties.
    3. In the Data section, enter the value Hint to the field Key.

4-NEW.png

6. Next step is to add a new icon tab filter to the icon tab bar.

    1. In the palette, expand the Container section. Alternatively you can use the search field and search for example for filter or tab.
    2. Drag the IconTabFilter control from the palette to the canvas and drop it on the information icon.

5-NEW.png

7. As our new tab should contain customer data, we will change some properties of the new IconTabFilter control.

    1. In the canvas, select the icon of the new tab filter. Note that in the Outline pane, sap.m.IconTabFilter is selected -but more on that later.
    2. In the Properties/Data pane, the Properties with all its sections are expanded.
    3. Go to the Appearance section and select the value Default for the Icon Color field.
    4. As we do not need any numbers in our tab, we delete the default value of the Count field in the Data section and enter the value Customer for the Key field.
    5. In the Misc section, change the value of the Icon field to sap-icon://customer and the value of the Text field to Customer.

6-NEW.png

8. Now the new icon tab filter needs some content (some fields to display customer detail data). To add that, we make use of the SimpleForm control.

    1. In the palette, expand the Layout section or search for the simple form via the search field.
    2. Drag the SimpleForm control from the palette to the canvas and drop it on the icon of the new tab filter.

7-NEW.png

9. Cool, with the simple form already some field elements are provided, we only need to adjust them a bit.

    1. In the canvas, select the title in the simple form.
    2. In the Properties/Data pane, in the Properties section, under Appearance, change the value of the Text field to Customer Details. Hint: You have to hit Enter to make your entries visible in the canvas.

8-NEW.png

    1. In the canvas, select Label 1 in the simple form.
    2. In the Properties/Data pane, in the Properties section, under Misc, change the value of the Text field to Sales Organization.

9-NEW.png

    1. In the canvas, select Label 2 in the simple form.
    2. In theProperties/Data pane, under Properties, under Misc, change the value of the Text field to Sales Organization Name.
    3. Delete the second input field under Sales Organization.
    1. /wp-content/uploads/2014/09/11_537970.png

  1. 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 Outline pane, the corresponding control is marked in the control tree. Expand the highlighted sap.m.Input node, then the properties node, and select the property value.
    3. In the Properties/Data pane you noticed that this time Data is expanded.  Open up the SalesOrders node and select SalesOrganization. Hint: In the Outline pane, the binding is indicated by the text {SalesOrders.SalesOrganization} next to the property value.

      /wp-content/uploads/2014/09/12_538006.png

    4. Do the same steps for the input field of Sales Organization Name in the simple form but select SalesOrganizationName from the SalesOrder tree in the Properties/Data pane.
    5. Finished! Just save your changes.

Let’s check what the result looks like

  1. In your project folder, select the file index.html.
  2. In the context menu, select Run -> Run with Mock Data.
  3. In the Run with Mock Data dialog box, choose Run (no further input required).
  4. The application preview is started, the application is loading and data is being mocked based on the service structure you have created.

         Hint: As the preview with mock data opens up in a pop-up window you might need to allow pop-ups from this webpage in your browser settings.

/wp-content/uploads/2014/09/15_538010.png


Hope you had fun following this small tutorial. Let us know what you think about the new layout editor 😉

To report this post you need to login first.

28 Comments

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

  1. Sven Schmid

    To be honest, based on earlier MS FrontPage results, I have till now reservations against “click&play development”. Maybe I’m wrong and old fashioned, but I like to control my code to make sure it behaves just the way I intended it to do…

    I know that it is a new challenge for the development community that designer and developer have to be more and more one person (and I will never become a good designer). So the route of march is market driven, and it seems as this is the way to go

    (0) 
    1. Margot Wollny

      According to the colors – I assume you refer to the code editor …

      Did you already detect the customizing for the code editor (Tool Bar Menu -> Tools -> User preferences -> Code Editor)? There you can choose from four different themes. I think SAP Morlock is quite close …?

      (0) 
  2. Janarthanan

    Hi

    Could you please provide how to get in RDE tool,Where to download & Process step

    If possible any link good for freshers

    (0) 
      1. Janarthanan

        Hi Margot

        Thanks for the information and its help me to start new learning

        Thank you somuch 🙂

        (0) 
  3. Timothy Muchena

    Hi

    I am getting error message as shown below when i try to import OData model

    “Unhandled Error: Cannot read property ‘addContent’ of undefined”

    Otherwise I am loving this

    (0) 
    1. Margot Wollny

      Hi Timothy,

      Hmm, quite strange. Never got this message before. Did you used the OData Model file provided in the documentation or did you create your own one? In case you used our file – do you get any errors displayed in the console?

      (0) 
  4. Prerana CV

    Hi Lisa,

    Great blog here. Thanks a lot for the step-by-step guide.

    I was wondering if you could help me in editing the mockdata provided by the metadata.xml file you have mentioned.

    So, I followed this documentation – SAP Web IDE Developer Guide

    However, I don’t find the option “Edit Mock Data” as mentioned in the developer guide.

    Could you please help me ?

    Please find the attached image.

    /wp-content/uploads/2014/11/metadata_error_582785.png

    Regards,

    Prerana

    (0) 
    1. Raz Korn

      Hi Prerana,

      Please check that the following line is the first line of the metadata.xml file:

      <?xml version=”1.0″ encoding=”utf-8″?>


      Regards,

      Raz

      (0) 
    1. Raz Korn

      Hello Sridevi,

      The Local Installation capabilities are a subset of the HCP productive landscape.

      The Layout Editor is an experimental feature for non-productive use only. Thus, it is only available on the HCP trial landscape.

      Regards,

      Raz

      (0) 
    2. Oliver Graeff

      Hi Sridevi,

      the current local trial installation is a subset of the functionality available on the HCP trial landscape. It includes the layout editor, which you should get for an XML view file (created form the Fiori Starter App template) with right mouse -> Open With -> Layout Editor.

      (It is planned to have the layout editor also available on the productive HCP landscape soon, once the user feedback has been implemented.)

      Best regards,

      Oliver

      (0) 
  5. Joao Sousa

    Will this be available in the local SAP WebIDE? Many people work in companies that refuse to have connections from an ERP to a Cloud Platform, I can’t use this in HCP.

    I’m pretty sure a lot of people share my particular problem, and it’s a barrier to entry for your new UI strategy.

    (0) 
  6. Jonathan Keogh

    Hi all, Layout Editor has changed with Web IDe 1.10 and data binding is now different from the steps above… can we please update the final data binding steps of above example considering the new changes ?

    thank you !

    (0) 
  7. Sai Giridhar Varanasi

    Hi all,
    Firstly thanks for the blog.
    I just had a small question, can I get this layout editor for HTML views.
    I see it available only for XML views.
    Please correct me if I’m wrong. I already worked on XML views and just started testing with HTML views.

    Please suggest.

    Sai

    (0) 

Leave a Reply