Tailoring the TM User Interface to your heart’s content (part 1)

[Former Member]

I am a big believer in the fact that delivering applications with user engaging interfaces will make for happier and more productive users. When I look back on the SAP UI history and see how things have over time changed, I cannot but be in awe – (the SAP design Guild will give you an idea of what I mean as far as the GUI is concerned)

The definition of “user engaging” will vary from user to user because  we work and process things differently. It is therefore important to offer the users the ability to tailor their working environment (the way they interact with a system) to their liking. That said  it is also important for a company to be able to control the look and feel of an application so that it is consistent across a business unit or a whole company (trying to standardise your processes and documentation will not bode well if a high degree of user driven personalisation is allowed).  It is not always easy to reconcile the two options and every company will have to weigh the pros and cons of each option.  Thanks to the Floor Plan Manager, SAP Transportation Management web dynpro applications have become highly adaptable – they can be personalised by an end user or centrally by an administrator. When we talk about “adaptation” of web dynpro applications with the Floor Plan Manager, there are three possible levels of adaptation that are possible.

• Personalisation – Any user can in one client make personal UI settings,
• Customizing – A system administrator will create/change UI settings that will impact all users in one client – these settings can be included in a transport request,
• Configuration- A developer will make actual (workbench) changes that will impact all users in a system.

This is summarised in the graphic below.

As the third option (configuration) is considered a SAP change , I will not talk much about it – I will focus on personalisation (part 1 – this post) and customising (to appear later in part 2).  To work with a concrete use case around the topic of personalisation, I will use the forwarding order entry application.

Assigning Default Values

As I execute the Create Forwarding Order application, I am presented with many fields.

It could be that the transportation mode that I use is always “road”. To avoid typing it every time I create a forwarding order, I could simply type it once, then do a right click on the field and select the “use current value as default” option (as shown below).

This value will then be defaulted next time I create a forwarding order.

Removing UI Elements

Once I reach the main forwarding order creation screen, I am confronted with a screen such as the one below.

It could be that out of all the fields that are presented to me, there are some that I never use and I wish to remove them from the UI.  For example I want to remove the “Comments” block in its entirety. To do so position the cursor on the block label (Comments), then right click your mouse and select the option as shown below.

Once you have done that the “Comments” block will have disappeared from your screen and the “Notes” block will have moved up to take the place of the block you just removed (as shown below).

Another removal example, is the removal of a specific field. In this case I want to remove the “Secondary Reference Number”. Once again, position the cursor on the input field and select the option shown below.

One again the field you removed disappears and the fields below it are moved up to take the vacated space.

Re-activating removed fields

It is important that you know how to “revive” fields you may have removed. To do so, position your cursor on your screen (outside a field), then right click your mouse to call up a contextual menu similar to the one below.

This will then show you a popup with a list of the elements that you previously removed.

You can then simply click on the link that corresponds to the element you want to bring back to life!

Re-designing your screen

The last think we will look at in this post is the ability to re-design the various UI elements (tabs) in front of you. I’ve sat down and worked out how I would like to process incoming forwarding orders in a manner that is a bit more efficient and logical than having to navigate between the various tabs (similarly when I retrieve an existing forwarding order I will have all the information I need in front of me).  This is how I would want my screen to look like.

Essentially, I want to have business partner information tab and the locations & dates tab to have their own separate existence and always be displayed.  To do so, click on the “Personalize” icon.

In the pop up that will appear, select the two column 50:50 option. This will divide your screen in two equal sections.

Now select the Business Partner and Location and Dates/Times tabs and click the right arrow to move them to the right column. Make sure the “Stackable” button is de-pressed, otherwise they will appear as tabs.

Once you have done that just press save.  Your screen now looks as shown below.

Reverting back to default settings

If you ever wanted to get rid of all you screen personalisations, this is something that could be very easily performed also. Simply click on the “Personalise” icon once again and click the button “Reset to Default”.

In the next part we’ll get in the more interesting topic of UI Customising.

This is cross posted from pascalrenet.com