SAP Cloud Applications Studio
UIDesigner as MockUp Tool
Tags:
In this article you will learn how to use the UIDesigner as a tool for MockUps without a Business Object (BO) binding.
Learning from latest Design Thinking Theory (s. Brown,Tim (2009): Change By Design. New York: Harper Collins, 87ff.) or from the longer present User Centered Design Theory (s. Spool, Jared: http://www.uie.com/articles/cost_of_frustration/) it is beneficial for product costs, lifecycle and acceptance if you are able to prototype and test it at an early stage. Transferring this to the SAP Cloud Tools it requires a feature to build fast mockups even before any BO has been built.
You can use the UIDesigner to build such MockUps. Using Front-End scripting you are able to build high-fidelity MockUps with interactivity. These MockUps can be used for user testing or to show customers first ideas of an application. My personal experience as User Experience Expert at SAP is that prototyping, user tests and product iterations lead always to a better product. Additionally do not underestimate that software requirement discussions have deeper intensity and better results if real application MockUps are displayed, because all participants are better focused and have a more detailed picture of the planned application/features.
The following article falls into 3 sections:
- Step-by-Step guide to build a MockUp with the UIDesigner Tool
- Step-by-Step guide to navigate between separate 2 Mockup screens
- Listing of common UIControls with Front-End Scripting examples
Section 1: Step-by-Step guide for MockUp production with Business ByDesign Studio
- Create a “Dummy BO”. Select “Add Item” Dialog. Select “Business Object”. Write one element into the BO. Save and Activate the BO.
- Open the “Add Item” dialog and select the wanted screen. During screen creation the program wants to know to which BO the screen gets bound. Select the “Dummy BO”. Screen gets created and is visible as object in the solution explorer.
- Open screen in UIDesigner. Delete Dummy BO Element.
- Switch in UIDesigner to Controller Tab.
- Add Eventhandler Type “Script” (s. screenshot) The scripting can be seen in the red colored area: For example first scripting row means: DataField named “Order_Number” has the value “12345”. The effect is that an Inputfield bound to this datafield displays on the UI the value “12345”.
Fig. 1: Screenshot from the UIDesigner Controller Tab. On the left side an eventhandler has been created and named “Scripthandler”. On the right side the eventhandler type has been switched to Script. Under source the Front-End Scripting has been added. - Start building your MockUp by placing the UI Controls
An example:
a. Drag&Drop UIDesigner UIControl (i.e. Inputfield) onto WYSIWYG area.
b. A datafield is created in parallel and by default bound to the new UIControls. To keep overview on structure provide a useful naming to the datafield (s. right top of Figure 1)
c. Write scripting into your Scripting Eventhandler to make some data visible. Use the naming of the Datafield - Switch to Datamodel Tab in UIDesigner. Select Root Node. Inside Properties of Root Node adjust property “OnInitialize” and select here the just created Eventhandler type Script. This has the result that the script is executed as soon as the screen gets called.
With these changes you are now prepared to build your own MockUp with the available UI controls. Use the UIDesigner WSIWYG Designer Tab and the properties to create the Mockup. To provide some Testdata for the UIControls see section 3 of this article. It contains scripting examples for following common UIControls: Inputfield, Static Text, Compound Field, Button, Object Value Selector (OVS), Text Edit, Date, Link, Checkbox, Advanced List Pane, DropDownListBox, Radiobutton. All of these controls can get dummy data though front-end scripting.
Section 2: Step-by-Step guide to navigate between 2 separate MockUps
In order to navigate between 2 separate screens you should have 2 MockUp screens prepared.
- Select First Screen and add an element which should trigger the navigation. For example a button.
- Go to the Controller Tab and Add an Outport. Save and Activate screen.
- Select the Second Screen and go to the Controller Tab and add an Inport. Save and Activate screen.
- Go to the First Screen. Select the Button. Look in the Button properties for Navigation and call the “Model Navigation…” dialog.
- Go to the Tab “SimpleNavigation” and select the just created Outport on your First Screen. Select Navigation Style “Inplace”.
- On the same dialog browse for your Second Screen. Select the second screen and choose the just created Inport in your Second Screen.
- Click “OK” and Leave the “ModelNavigation” Dialog. Save and Activate First Screen
- Test the Navigation by clicking the Button.
Now you have connected 2 separate screens and can mimic navigation through an application. Using this feature you are enabled to build large prototypes partially interactive prototypes. A clear advantage if you mimic navigation or prepare some large scale user testing.
Section 3: Examples for the most common MockUp UIControls:
You find here concrete listing with scripting examples of the most common UI controls.
Table 1 - UIControls: Inputfield, Static Text, Compund Field, Button, OVS, Text Edit, Date, Link and Checkbox | ||||
---|---|---|---|---|
Result: Datamodel: | UIControl Properties: |
| ||
Datafields: | No specific adjustments. | |||
Datafield Properties: | for Date Field the CCTS Type needs to be changed to “Date” | |||
Scripting: (for Script Eventhandler) | $data.My_Inputfield = "Testentry1" $data.My_Display_Only_Text = "Textentry 2" $data.CompoundField.Customer_InputField ="Customer1" $data.ObjectValueSelector = "OVS1" $data.TextEdit = "This is a Textedit field with 3 rows." $data.Date = "11.09.2012" $data.Link ="Hyperlink" $data.CheckBox = "yes" $data.Icon = "Green Led" | |||
Hints/Comments: |
|
Table 2 - UIControls: Advanced List Pane (ALP) | ||||
---|---|---|---|---|
Result: Datamodel: | UIControl Properties: |
| ||
Datafields: | in case of ALP the Datamodel entity is called “Datalist”; Datafields are the separate columns, give specific namings and repeat these in the scripting; | |||
Datafield Properties: | no adjustments needed; for this ALP example name the Datalist Datafields “A, B”and “Icon” | |||
Scripting: (for Script Eventhandler) | $data.DataList.Add() $data.DataList.Get(0).A ="1" $data.DataList.Get(0).B ="2" $data.DataList.Get(0).Icon = "Green Led" $data.DataList.Add() $data.DataList.Get(1).A ="3" $data.DataList.Get(1).B ="4" $data.DataList.Get(1).Icon = "Yellow Led" $data.DataList.Add() $data.DataList.Get(2).A ="5" $data.DataList.Get(2).B ="6" $data.DataList.Get(2).Icon = "Red Led" $data.DataList.Add() $data.DataList.Get(3).A ="7" $data.DataList.Get(3).B ="8" $data.DataList.Get(3).Icon = "Locked" | |||
Hints/Comments: |
|
Table 3 - UIControls: Drop Down List Box (DDLB) | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Result: Datamodel: | UIControl Properties: |
| |||||||||
Datafields: | no adjustment needed; for this example name the Datalist Datafields “Code” and“Value” | ||||||||||
Datafield Properties: |
| ||||||||||
Scripting: (for Script Eventhandler) | Create new Datalist in Datamodel and add 2 Datafields named "Code" and "Value" $data.DataListDDLB_CodeValue.Get(0).Code = "1" $data.DataListDDLB_CodeValue.Get(0).Value = "Phone" $data.DataListDDLB_CodeValue.Add() $data.DataListDDLB_CodeValue.Get(1).Code = "2" $data.DataListDDLB_CodeValue.Get(1).Value = "Face-to-Face" $data.DataListDDLB_CodeValue.Add() $data.DataListDDLB_CodeValue.Get(2).Code = "3" $data.DataListDDLB_CodeValue.Get(2).Value = "Email" | ||||||||||
Hints/Comments: |
|
Table 4 - UIControls: Radio Button (RB) | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Result: Datamodel: | UIControl Properties: |
| |||||||||
Datafields: | no adjustment needed; for this example name the Datalist Datafields “Code” and“Value” | ||||||||||
Datafield Properties: |
| ||||||||||
Scripting: (for Script Eventhandler) | Create new Datalist in Datamodel and add 2 Datafields named "Code" and "Value" $data.DataListRB_CodeValue.Get(0).Code = "1" $data.DataListRB_CodeValue.Get(0).Value = "Phone" $data.DataListRB_CodeValue.Add() $data.DataListRB_CodeValue.Get(1).Code = "2" $data.DataListRB_CodeValue.Get(1).Value = "Face-to-Face" $data.DataListRB_CodeValue.Add() $data.DataListRB_CodeValue.Get(2).Code = "3" $data.DataListRB_CodeValue.Get(2).Value = "Email" | ||||||||||
Hints/Comments: |
|
Table 5 - UIControl: Object Value Selector (Value Help) | |
---|---|
Result: Datamodel of ObjectValue Selector (OVS): | In some scenarios you need involve also a Value Help (Object Value Selector). Here you learn step-wise how to implement a working Object Value Selector (OVS) without BO involvement.
The screens are ready. Render the screen which contains the OVS calling field in the browser. Click on |