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

[LisaMonshausen]

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

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 in the right side bar.
4. Let’s start with something easy and delete the icon 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.

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.

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.

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.

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.

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.

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. 

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.

      

   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.

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