What is the New ITSmobile Visual Editor?
The ITSmobile Visual Editor is a part of ITSmobile. It introduces the following features:
o Fully integrated screen editing within SE80
o Screen elements can be freely arranged on screen
o Positions and dimensions of screen elements are set absolute based on unity pixels (px)
o All styling of screen elements is based on web standard Cascading Style sheets (CSS)
o Allows to hide individual screen elements on resulting HTML page without the need to change the underlying ABAP screen.
How to Use ITSmobile Visual Editor?
There are four Steps to get a running ITSmobile Service from ABAP Screens.
In this example the transaction we are calling is the test transaction "ITMOBILE00" and the service that we are creating is "TEST_MOBILE". Here are the steps to do this.
1. Create Internet Service.
1.1
First call the transaction in question. In this case it is "ITMOBILE00" - then hit the following in the following order: "CTRL + Shift +F1" and you will get the 'Technical Information' popup
as can be seen below.
1.2
Then go to transaction SE80 - ABAP Workbench. In the 'Repository Browser' select 'Program' and enter the program name that you displayed in Step 1.1
In this scenario it is called: SAPMIMOB1. Then select the folder 'Screens'. These are all the corresponding screens for transaction ITMOBILE00
1.3
Then call transaction SICF and create and activate the service name: TEST_MOBILE with the below 'GUI Configuration'
2. Generate Editor-Templates.
2.1 Call transaction SE80 and navigate to the step shown in Step 1.2. Select all the Screens you wish to modify using the ITSMobile Visual Editor, then using right click
select the context menu item 'Other Functions' and then select 'Create Template from Template'
2.2
Now enter the ITSMobile service in the resulting popup and define the folder theme name. In our example the service is called 'TEST_MOBILE' and Theme '99'
3. Working with ITSmobile Visual Editor.
3.1 Return to the 'Internet Service': TEST_MOBILE in SE80. In the folder "Editor-Templates" you will see all the screens from step 2.2 that have been created.
3.2
Double click on Editor template. 'SAPMIMOB1' then select the Edit icon(Pencil and Glasses). You are now using the ITSMobile Visual Editor!
4. Generate HTML-Templates and Publish them.
4.1 Once you have carried out the modifications using the ITSMobile Visual Editor you will need to create the HTML template.
From the Editor Templates use context menu "Other Functions"->"Create HTML Template from (Editor) Templates.".
4.2
Now in the "HTML templates" you will see the resulting HTML template will have been updated.
Next publish the HTML templates, the ITSmobile service with the modifications using the ITSMobile Visual Editor is now ready to run.
How do you know that the templates were generated correctly?
When you generate an HTML template from an editor template, the style MOBILEEDIT is set in the comment section of the template.
Prerequisites
Release and Support Package with ITSmobile Visual Editor included:
o 7.00 SP29 (SAPKB70029)
o 7.01 SP14 (SAPKB70114)
o 7.02 SP14 (SAPKB70214)
o 7.30 SP10 (SAPKB73010)
o 7.31 SP07 (SAPKB73107)
o 7.40 SP03 (SAPKB74003)
o 7.50 and higher
Source: ITSmobile Visual Editor Main Note 1872180
.
Kernel:
The editor uses the kernel-based JSON support. Therefore Kernel 7.20* or higher is required.
*For systems with kernel 7.20 at least kernel patch 116 is required. (JSON-Support: refer to SAP Note 1650141 )
Browser:
Internet Explorer 9 or higher is required to run the editor in SE80.
The ITSmobile Visual Editor was designed to work within SAP GUI's HTML Control using Microsoft Internet Explorer (MSIE) as documented in SAP note 1872180
The HTML Control based on Chromium or Edge will be supported. See SAP Note 3191851 - ITSmobile Visual Editor with Edge Browser Control
For the time being, please configure SAP GUI to make use of the MSIE based HTML control.
You can change the browser for the HTML Control in the SAP Logon Pad: SAP Logon → Options → Interaction Design → Control Setting.
NB: If you call the ITSmobile Visual Editor to process an editor template, and the editor hangs and does not show the template in the graphical display,
then check the SAP Note 2570160 - ITSmobile Visual Editor: Determining best value for wait time in communication between ABAP and ITSmobile Visual Editor.