Skip to Content
Author's profile photo Lisa Monshausen

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

ℹ 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 😉

Assigned Tags

      28 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Syam Babu
      Syam Babu

      Excellent Stuff 🙂

      Author's profile photo Former Member
      Former Member

      Awesome editor!. I was looking for something like this.

      Author's profile photo Ramakrishnappa Gangappa
      Ramakrishnappa Gangappa

      Nice blog.

      Thank you Lisa for sharing such a useful information 🙂

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi

      Thanks for writing this blog. 🙂

      Author's profile photo Sven Schmid
      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

      Author's profile photo Erik Hoven
      Erik Hoven

      🙂 Yes, yes, yes.....

      Author's profile photo Rolf Hoven
      Rolf Hoven

      Good work !  🙂

      Properties/Data pane in RDE can be better !

      ..and also the colors...comparing to Sublime:

      /wp-content/uploads/2014/09/compare_sublime_river_538575.png

      Author's profile photo Margot Wollny
      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 ...?

      Author's profile photo Janarthanan
      Janarthanan

      Hi

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

      If possible any link good for freshers

      Author's profile photo Lisa Monshausen
      Lisa Monshausen
      Blog Post Author

      Hi,

      please have a look at the "Get Started" section in the SAP River RDE developer guide: https://help.hana.ondemand.com/SAP_RDE/frameset.htm?6284a94889db4f3cad001ba674282f20.html

      Best regards,

      Lisa

      Author's profile photo Janarthanan
      Janarthanan

      Thank you Lisa 🙂

      Author's profile photo Margot Wollny
      Margot Wollny

      Sure Janarthanan,

      Best to start is with this overview page about RRDE: http://scn.sap.com/docs/DOC-55465. There you can get some valuable how-to guides and information how to access the trial version of RRDE.

      As quick starter: You can access SAP River RDE beta from the SAP HANA Cloud Platform website. The necessary steps for setting up RRDE from the HANA Cloud Cockpit are described in the Getting Started documentation.

      Author's profile photo Janarthanan
      Janarthanan

      Hi Margot

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

      Thank you somuch 🙂

      Author's profile photo Timothy Muchena
      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

      Author's profile photo Margot Wollny
      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?

      Author's profile photo Timothy Muchena
      Timothy Muchena

      The error disappeared after I cleared the browser cache.

      Thank you for an excellent blog

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Raz Korn
      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

      Author's profile photo Former Member
      Former Member

      Hi Raz,

      Yes, that helped. Thank you.

      Regards,

      Prerana

      Author's profile photo Lisa Monshausen
      Lisa Monshausen
      Blog Post Author

      Hi Raz,

      many thanks for pointing this out. This issue will be fixed with the upcoming version 1.6.

      Best regards,

      Lisa

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi,

      Thanks for sharing wonderful stuff.

      I followed the below URL to install WEB Ide in my local system.

      http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/70eaf452-a341-3210-7395-b9b6dfdf0f3e?QuickLink=index&…

      In myWEB IDE I am not getting Layout Editor.I am getting only text editor to edit the xml files.

      How to get the Layout editor in my WEB IDE.

      Please help me.

      Regards

      Sridevi

      Author's profile photo Raz Korn
      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

      Author's profile photo Oliver Graeff
      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

      Author's profile photo Joao Sousa
      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.

      Author's profile photo Oliver Graeff
      Oliver Graeff

      Hi Joao,

      yes, the Layout Editor is available, see my post above.

      Cheers, Oliver

      Author's profile photo Jonathan Keogh
      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 !

      Author's profile photo Jonathan Keogh
      Jonathan Keogh

      basically from step 10...

      Author's profile photo Sai Giridhar Varanasi
      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