Hello everybody,

here I’d like to give you a wrap up about my dCode session CR717 about the SAP Web IDE WYSIWYG aka Layout Editor which I held in Berlin on Tuesday, 11th November 2014 – and which will be part of #sitNL 2014. I did the preparation together with my colleague Tino Butz, who held the same session in Las Vegas. Few words about me: I am a JavaScript developer at SAP in Walldorf (Germany).

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

SAP Web IDE SCN Homepage (lots of tutorials and info material)

The SAP Web IDE is a cloud based development environment to develop SAPUI5 applications. It is already released to customers, you can buy it or try it out for free. The Layout Editor is part of the SAP Web IDE (technically speaking it is a plugin for the SAP Web IDE), but NOT released to customers yet.

In my session I first introduced the SAP Web IDE and after that I walked through the tutorial “Less Coding, More Designing: The New SAP Web IDE Layout Editor” from my colleague Lisa Monshausen (a how-to guide “How to use the Layout Editor of SAP Web IDE” by Wolfgang Scheer is also available).

WYSIWYG Layout Editor:

  • is not released to customers yet
  • it is a “developer preview” to get your feedback
  • currently supported in Chrome
  • try it out on our trial landscape

Source Code

I put the source code of the app – which was created with the “Fiori Starter App” template – onto Github – CR717.

You can import it as ZIP into a folder into the SAP Web IDE by right clicking the folder and selecting “Import -> Archive”. There you choose the file and don’t change the default settings.

To run the application select the file “index.html” in the Repository Browser and choose “Run –> Run with Mock Data” in the menu.

You can modify the Detail.view.xml and the Master.view.xml in the Layout Editor.


Finished app:

Bildschirmfoto 2014-11-19 um 22.49.30.png

Layout Editor sections

Here are the different sections from the layout editor:

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

Opening Layout Editor

If you have an XML view right click on a file and choose “Open with –> Layout Editor” to start it up in Chrome.

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

Key takeaways

There are several things which make me very excited about the layout editor. First off all: I am a visual oriented person – I’d like to see an instant preview of what I am doing.

Quick look

With the layout editor I can have a quick look at my view, without starting the whole application and write code for setting up the navigation.

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

Palette

In the palette I can get a quick overview of the currently supported controls which are draggable into the view area and can be modified in the layout editor. There are a lot of different controls in UI5 and I really like to snoop around in the different categories like layout or input to see what is available.

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

Properties

Buttons for example have a lot of different properties which can be manipulated. In the properties pane I can play around with those properties and see an instant preview of my changes. For me it is really good to see which are the most common properties of a control, so that I am able to learn how to use those controls.

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

Drag and Drop

It is pretty handy to grab a control and just place where you want it to be – I mean in contrast to sniffing through XML code and finding the right place “manually”.

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

Outline pane

In terms of hierarchy the outline pane is pretty useful – it tells me how the view is structured. If I select an entry in the outline pane it selected in the canvas and vice versa.

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

Data binding

If you select in the outline pane for example the value of a list item, the data binding pane pops up and there you can see the different properties of the collection.

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

And now we come to my favorite feature:

Instant code changes “preview”

We are all developers and are at home in the code editor – aren’t we? 😉 If I open the XML view in the code editor and in the layout editor at the same time I can make changes in the code editor, switch to the layout editor tab and immediately see my changes – without saving! There I could continue my manipulation of the view and switch back to the code editor. This goes really “hand-in-hand” and it is great that the Layout Editor produces “human readable” code which is easy to manipulate.

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

Keyboard support

There is a documentation about the keyboard support available.

Q&A

At the end we had enough time for Q&A. Here is a wrap up:

As stated above, the Layout Editor is currently available only on trial and works at the moment only in Chrome.

There are also some complex controls available like the “Grid Layout” and if you drag this control into there are also some example controls in it – same for simple form.

It is possible to display controls which are not supported by the Layout Editor, it means you can only manipulate them through code.

Actually there is no support for defining the events of a control in the properties pane.

Grid example:

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

Unsupported controls:

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

Created example code of a simple form:


<sap.ui.layout.form:content>
                    <sap.ui.core:Title text="Title"></sap.ui.core:Title>
                    <Label text="Label 1"></Label>
                    <Input width="100%"></Input>
                    <Input width="100%"></Input>
                    <Label text="Label 2"></Label>
                    <Input width="100%"></Input>
</sap.ui.layout.form:content>


Web IDE startup problems

The Layout Editor is in “developer preview” – so bugs could happen. When you restart the SAP Web IDE, it also restores your opened files. If one file crashed the layout editor you can get rid of the files which would be restored via url-parameter which is documented in our user settings:

  • settings=ignore to start without restoring
  • settings=delete to delete the settings


TL;DR

The Layout Editor can be a big benefit to quickly put together a layout and manipulate the controls. It works like a charm when editing the file in the code and layout editor at the same time, so you can have a quick view at your changes without saving. Try it out for free with Chrome.

Feedback? Problems? Questions?

If you want to provide feedback to the Layout Editor you can put it here.

If you have specific problems or questions I’d kindly ask you to open a new question here in SCN and put in into the SAP Web IDE category.

In the SAP Web IDE documentation you’ll find a known issues section.

To report this post you need to login first.

2 Comments

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

Leave a Reply