Integrate Screen Layout

For the use of the screen layout, it is advisable to use a screen generated by means of transaction /s10/util, as the subsequent installation by hand is quite lengthy. However, by following the instructions outlined below it should work:

1. Copy the class "s10.screenlayout" into your project for local development

The class "s10.screenlayout" is automatically inserted into every generated project by /s10/util. You can copy it from another generated project; no changes are necessary. If you transfer the project to the SAP MIME Repository later, it is recommended not to transfer the class "s10.screenlayout" or to delete it afterwards. Then the S10 Framework will use the class "screenlayout" from the "PUBLIC" folder (sap/bc/bsp/s10/public/classes/screenlayout). This makes sense so that possible later updates of the S10 Framework take effect, because a local class "s10.screenlayout" has priority over the public class.

The beginning of the name, here "matinfo", is arbitrary. You can use the name of the screen, but only if it has a maximum of 10 characters, otherwise method names (next step) will be longer than the permitted 30 characters. If necessary, shorten it. Then add "_layout" and "_layoutname".

3. Create the methods for initialising the layout object and validating the layout name

*  Deklaration
 methods: 
   build_matinfo_layout
    exporting
     matinfo_layout type ref to /s10/screenlayout, 

   validate_matinfo_layoutname
    importing
     matinfo_layoutname type string optional. 
  

*  Implementation 
 method  build_matinfo_layoutname.
  if  matinfo_layout  is  initial.
   create  object  matinfo_layout.
   matinfo_layout->init(  parent  =  me  screenname  =  'matinfo'  ).
  endif.
 endmethod.

 method  validate_matinfo_layoutname.
  matinfo_layout->read(  matinfo_layoutname  ).
 endmethod.

When "matinfo_layout->init()" is called, the previously selected name "matinfo" is entered under "screen". The layout definitions are then also saved in the database under this name.

4. Include the layout in the HTML file and mark the area to which the layout is to refer with the assigned id, in our example "matinfo"

 <div style="float: right;">

        <label class='label' style="width: 50px; margin-bottom: 6px; text-align: right; --portrait-width: 30px; color: white">Layout</label>

        <select class="inputselect" name="matinfo_layoutname"
            data-s10dropdownlist="matinfo_layout.ddl_layoutname"
            data-s10options="hideKeys,noEmptyEntry"
            size="1" style='width: 160px; --portrait-width: 60px; height: 22px; padding: 0px; margin: 0px; border-radius: 4px; background-color: #ffffffb8' onchange="S10Enter();">
        </select>
        <button type="button" class="button-small startbutton" onclick="S10LayoutDialog('matinfo')" style="background-color: #2a2a2a29; margin: 0px; height: 18px;">&#9655;</button>
        <input type="hidden" class="output" name="matinfo_layout.properties" onchange="S10ApplyLayout('matinfo', this.value)" />

</div>

<div id="matinfo">

... Here are all the HTML elements that the layout should refer to

</div>

....

The layout selection should now appear. Click on the arrow to the right of the layout selection to display the layout dialogue. All HTML elements that are assigned to one of the following CSS classes are included in the layout definition:

In addition, the attribute name= must be set in the case of "subtitle". Since the name is used to identify the element in the layout definition, it must be unique in the specified layout area. For the other classes ("infoblock..."), the "name" attribute from the first occurring "label" element or, if not present, the first element of the infoblock that has a "name" attribute is used. In the layout dialogue, this name is also used for the help function and displayed there.

The text displayed in the layout dialogue is the title itself for "subtitle", for the other elements the value of the label element or otherwise of the first element with "name" attribute. This automatic assignment can be overridden by setting the attributes "data-s10title" and "name" in the "infoblock" element to adjust text and name in the layout definition.

The labels can also be dynamic (SAP Data Dictionary) and then appear accordingly in the layout dialogue.

The following info block receives the standard label of "matnr", i.e. "Material", as the title and "matnr" as the id.

For the output of an "infoblock" at the beginning of a new line, it is recommended to use "style='min-width:100%' ", e.g.:

Here the subtitle information is included in the infoblock, which has the advantage that it is also automatically switched off when the product image is switched off. The title can still be switched off or changed separately in the layout.

It is advisable to define a standard layout (e.g. /STANDARD) that contains all normally useful fields. Users can use this as a template for their own layouts.

The S10 Framework does not transfer any attributes from the ABAP program to the HTML page, which are present in the layout definition but are not activated there. The build methods are also only called for these elements. This avoids, for example, database access to determine turnover figures if the user hides the turnover statistics according to the layout definition.

In the ABAP program, you can check directly whether an attribute is invisible according to the current layout, e.g.: