Lumira Designer has been adding features to enrich the self-service experience of its applications. SAP Lumira Designer 2.1 allowed users to create components at runtime. As an extension, SAP Lumira Designer 2.2 now provides users the ability to create their own components, modify their size and position and save the state of their applications at runtime. This, of course, is a feature that must be provided by the application designers, and this is done using a new Technical Component called ‘Authoring’. In this blog, we’ll describe steps to set up a basic authoring feature in Designer applications.

Pre-requisites for Authoring

Composites in SAP Lumira Designer 2.2 are the only components which are supported as an area for authoring directly, i.e. using the properties of the Authoring technical component. While users can still ‘Author’ the dashboard based on other container components through scripting. However, this has a limitation, which is that the ‘Authored’ dashboard cannot always be saved. We will be throwing more light on this on a more detailed blog on Authoring.

Setting your application up for Authoring

Create an instance of the ‘Authoring’ technical component by right clicking on the technical components section in the Outline tab and selecting menu option Create -> Authoring.

This is just the first step to setting up this feature. Once the technical component is in place, it comes down to the developer to define which area of the application the user can ‘author’ in – meaning, the area of the application that the user can move components around in. This can be done using scripting, or through properties of the technical component itself.

Quick Ad-Hoc Analysis – A Use Case for Authoring

Consider the Sales Details view shown in the image below. Let us say that the user wants to see State and Region level Sales data in this view just for temporary analysis. With the ability to create components at runtime (available as of SAP Lumira Designer 2.1), and the newly introduced ‘Authoring’ feature in SAP Lumira Designer 2.2, end-users need not contact the Application Designers to do this kind of Ad-Hoc analysis on their dashboards anymore. This can simply be done directly by the end-user (so long as the option has been enabled by the application designer when creating the application). Let’s look at how this is done.

This Sales Details View consists of a panel with a Crosstab and a Table within. To enable authoring for the end users on this panel, the application designer must first ‘enable’ authoring using the following script:

AUTHORING.setAuthoringEnabled(true);

AUTHORING.setAuthoringArea(PANEL_1);

So far, we can only assign a Composite as an Authoring Area to the Authoring component using its properties. The only way to make other containers ‘authorable’ is to use scripts, like we have done above.

The script given above can be embedded within a component such as an Icon or a Toggle Button that allows end-users to switch on and switch off Authoring at runtime when required. When doing this on click of an icon, the script would look something like this:

if(AUTHORING.isAuthoringEnabled()) {

AUTHORING.setAuthoringEnabled(false);

ICON_AUTHORING.setIconUri(“sap-icon://edit”); //Changing the icon

}

else {

AUTHORING.setAuthoringEnabled(true);

AUTHORING.setAuthoringEnabled(true);

ICON_AUTHORING.setIconUri(“sap-icon://sys-enter”); //Changing the icon

}

When the user clicks on the icon or button at run time to enable Authoring, a dotted outline appears around the container being authored to indicate that all the components inside it are selectable and resizable.

Selecting a component automatically displays a context menu right next to it (like what you might see when selecting a component in SAP Lumira Discovery). Users can also right click on the component to bring up this context menu.

Using Authoring with the ‘Components’ technical component

One of the ways that you can create newer components when making a container ‘authorable’ is to use the Components technical component. Application designers need to first add the components technical component to their application to enable this.

Once this is added, application designers can then enable component creation at runtime. (Refer here for a step by step guide on how to achieve this).

Working with our Ad-Hoc scenario

1. Enable the creation of a new table at runtime (using icons or other menu options).
2. At runtime, once the table is created, it is placed below the chart.
   
3. To bring the newly created crosstab to the front, Right- click the component-> Select ‘Bring to Front’. The same behaviour can also be achieved using the following script:
   AUTHORING.bringToFront();
   
   This is what it would look like once the table is brought to the front:
   
   Similarly, the component can be sent to the back if the user wishes. This option is available in both context menu and via scripting .
   (AUTHORING.sendToBack();)
4. These components can be resized during run time.
   
5. Components can also be copied and pasted within an authored container for quick duplication.
   
   And, of course, all these functions – Cut, Copy, Paste – can also be executed using APIs:
   AUTHORING.copy(); //Selected component will be copied
AUTHORING.cut(); //Selected component will be cut
AUTHORING.paste(); //Cut/Copied component will be pasted.
6.  Components can also be deleted at run-time using the context menu. There are, however, no APIs that allow for component deletion.

Other APIs for Authoring

Other than the above-mentioned APIs there are few other scripts available for Authoring.

• getSelectedComponent() – returns the selected component in the authoring area. From this, we can get the component’s name by getSelectedComponent().getName().
  
• setSelectedComponent() – sets the given component as selected; for this, the Component ID is required.
  
• existsComponent() – returns true if the given component is present inside the Application or not.

Saving our Ad-Hoc Scenarios

Here’s the caveat – Saving the Ad-Hoc scenario can be done using Bookmarks, but that’s only if authoring has been used to merely modify the positions of existing components. However, if users have added new components to the authoring area prior to saving the bookmark, then the ‘Save’ scenario does not work as expected. Users will see errors such as this one:

There is still a way of saving work done at runtime using authoring (hint: ‘Document’). We’ll see more of that in a follow-up blog diving deep into the authoring feature.

—————-

The newly introduced Authoring feature brings a great deal of power to the end-user. As application designers, it provides the capability to deliver applications that are somewhat a ‘mini-lumira-discovery-thin-client’ to end users. As long as the only expectation for end users is to work with data from SAP BW or SAP HANA systems. It’s even possible to create a completely self-service based application. We will be exploring more about this feature, so stay tuned for more blogs about this!