Skip to Content
SAP Cloud Applications Studio

UIDesigner as MockUp Tool

Tags:
  • cloud;
  • byd_studio
  • byd;
  • ondemand;
  • cloudstudio_howto_ui
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:
  1. Step-by-Step guide to build a MockUp with the UIDesigner Tool
  2. Step-by-Step guide to navigate between separate 2 Mockup screens
  3. Listing of common UIControls with Front-End Scripting examples

 

 

Section 1: Step-by-Step guide for MockUp production with Business ByDesign Studio

 

  1. Create a “Dummy BO”. Select “Add Item” Dialog. Select “Business Object”. Write one element into the BO. Save and Activate the BO.
  2. 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.
  3. Open screen in UIDesigner. Delete Dummy BO Element.
  4. Switch in UIDesigner to Controller Tab.
  5. 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.
  6. 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
  7. 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.
  1. Select First Screen and add an element which should trigger the navigation. For example a button.
  2. Go to the Controller Tab and Add an Outport. Save and Activate screen.
  3. Select the Second Screen and go to the Controller Tab and add an Inport. Save and Activate screen.
  4. Go to the First Screen. Select the Button. Look in the Button properties for Navigation and call the “Model Navigation…” dialog.
  5. Go to the Tab “SimpleNavigation” and select the just created Outport on your First Screen. Select Navigation Style “Inplace”.
  6. On the same dialog browse for your Second Screen. Select the second screen and choose the just created Inport in your Second Screen.
  7. Click “OK” and Leave the “ModelNavigation” Dialog. Save and Activate First Screen
  8. 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:
Label<use Overridden Text>
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:
  • How to create an interactive Object Value Selector can be found below in a separate section in ths document.
  • The UIControl property FieldWith defines the width of the controls.
  • The button text is defined through the button property “Text”. Use “Overridden Text” in the “Dependent Property Editor”..
  • With Compound Fields you can combine more than only 2 UI Controls in a chain
  • Date has calendar selection connected to it
  • Icon can be defined by UIControl property “Default Icon”
  • You can mimic dynamic form behavior if you select a Section Group and bind it for example to a Checkbox (Checkbox Value for example “More”). Use the Section Group property visible, selection advanced  à binding.

Table 2 - UIControls: Advanced List Pane (ALP)
Result:
Datamodel:
UIControl Properties:
Label<use Overridden Text>
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:
  • On Designer Tab doubleclick on labels/columns to change naming. Choose “OverriddenText”
  • “A,B, Icon” are the names of the datafields in the Datalist structure on theDatamodel Tab
  • Icon column is changed in UIControl properties to “display type” Icon, Icons arefound via naming from default Icons in UIDesigner Application
  • You can doubleclick a column title to change it.

Table 3 - UIControls: Drop Down List Box (DDLB)
Result:
Datamodel:
UIControl Properties:
Label<use Overridden Text>
CodePresentationModeCodeAndValue
Datafields:no adjustment needed; for this example name the Datalist Datafields “Code” and“Value”
Datafield Properties:
CodeListTypeListbound
List Binding<bind here codelist from Datamodel>
List Code Field./Code
List Value Field./Value
Initial Value<display Value on initial display>
Scripting:
(for Script Eventhandler)
Create new Datalist in Datamodel and add 2 Datafields named "Code" and "Value"
$data.DataListDDLB_CodeValue.Add()
$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:
  • To display values for the DDLB you need to create a Datalist with values in yourscripting. Bind this Datalist/Codelist to the Radiobutton Datafield.
  • You need to add the Codelist to the Datamodel via right mouse click on the RootNode
  • Add Datafields “Code” and “Value” to the Codelist
  • You can doubleclick a Label to change it.

Table 4 - UIControls: Radio Button (RB)
Result:
Datamodel:
UIControl Properties:
Label<use Overridden Text>
CodePresentationModeValueOnly
Datafields:no adjustment needed; for this example name the Datalist Datafields “Code” and“Value”
Datafield Properties:
CodeListTypeListbound
List Binding<bind here codelist from Datamodel>
List Code Field./Code
List Value Field./Value
Initial Value<display Value on initial display>
Scripting:
(for Script Eventhandler)
Create new Datalist in Datamodel and add 2 Datafields named "Code" and "Value"
$data.DataListRB_CodeValue.Add()
$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:
  • To display values for the Radiobutton you need to create a Datalist with values in your scripting. Bind this Datalist/Codelist to the Radiobutton Datafield.
  • You need to add the Codelist to the Datamodel via right mouse click on the Root Node.
  • Add Datafields “Code” and “Value” to the Codelist.
  • You can doubleclick a Label to change it.
  • Mind the Property “CodePresentationMode” (s.a. UIControl Properties) otherwide it will not work.

 

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.

  1. In SAP Business ByDesign Studio use “Add” > “New Item” to create an OVS.
  2. Open the OVS in UIDesigner.
  3. Delete existing AdvancedListPane (ALP) and replace it by a new ALP. Create/Rename Datafields in DataModel to “ObjectID”,“ObjectName” and “ObjectID_2”.
  4. Go to Controller Tab and delete the existing query.
  5. Create an Eventhander type ‘Script’and fill the ALP with Testdata (see above the table #2 in this article for advice how to do the scripting for a list). Fill the datafields “ObjectID” with ID and Name, “ObjectID_2” with the Object ID and “ObjectName” with the ObjectName.
  6. Go on DataModel Root Node and set the property “OnInitialize” to the new created Eventhandler. The effect is that the Eventhandler is called on screen rendering and fills the datalist with the data contained in the script you have just entered.
  7. On Datamodel Tab mark the newly created DataList in the Datamodel. Set the property “OnCommitSelection” to the Eventhandler “SelectionChangedHandler”. 
  8. Switch to Designer Tab and delete the List Column bound to Datafield “ObjectID”. Visible should be now only the columns bound to Datafields “ObjectID_2” and “ObjectName”.
  9. Go to the Controller Tab.
  10. Click on Eventhandler “GetValueHelpHandler” and delete the contained Eventhandler.
  11. Click on Eventhandler “RetrieveValueHelpHandler” and delete the contained Eventhandler.
  12. Click on Eventhandler “SelectionChangedHandler” and set the first type to FireOutport and select the OVS contained Outport. Second line WindowAction stays as is.
  13. Switch to Outports section. Delete the contained entries from the Outport. Generate 3 new lines and bind to each lineone Datafield of your newly created DataList. Parameter Names should be“ObjectId”-> bound field is ObjectID, “ObjectName” -> bound field is ObjectName and “ObjectID_2” bound field is “ObjectID_2”.
  14. Save and Activate OVS screen.
  15. Switch to the screen which should contain the calling OVS field.
  16. Add OVS field on the Designer Tab.
  17. Select in the properties of the OVS field the “OVSComponent” and select your newly created OVS.
  18. Save and Activate screen.

The screens are ready.

Render the screen which contains the OVS calling field in the browser. Click on
the OVS symbol. The OVS is coming up and closes again on selection of a list
entry. The value of the datafield “ObjectID” is displayed in the OVS field.

January 07, 2013 at 16:42 PM
9 Likes

0 replies

No comments