In this blog I'lI show how to prototype a value help or select dialog in SAP BUILD in 10 easy steps... with many thanks to thomas.dubreuil for his guidance.
Like many of you I’ve been doing the open.sap.com Build Your Own Fiori 2016 course. This year the course is using SAP BUILD to do the prototypes. As a rule I like to do as many of these free courses and tutorial as I can fit in. It’s all good practice.
In doing my own design prototype for the challenge I noticed the new Value Help option and "phoned a friend" (thanks Thomas Dubreuil!) to get some guidance in how to make it work. I've created a simpler example prototype for this blog with 2 pages:
A first page where I show an Input "Currency" control with a value help, and a second page that shows the value help dialog that simulates selecting from a list of currencies.
Pre-requisites for this blog:
- You already have a login account to SAP BUILD and know how to access BUILD from SAP Splash.
- You already know how to create a BUILD prototype and Preview it.
- You already know how to use the Data Editor
Missing some of those?
If you need a login account, just go to the Splash homepage at SplashApp and press the Sign Up button in the top right hand corner to register.
If you not used BUILD before, and you are not sure what you can do with BUILD, there are helpful blogs available on SCN and on experience.sap.com. Here are a couple to get you going.
Its time to SPLASH your mind with SAP Build
Want to BUILD a better User Experience
Best of all BUILD comes with several Youtube videos explaining all the basics including how to use the Data Editor. You'll be shown these when you login to BUILD or you can find them on the SAP Splash channel on Youtube.
Aims for the Prototype
The aim was to create something akin to the sap.m.Select dialog (images optional).
NOTE: I want the Select dialog not the Value Help dialog itself for a couple of reasons. Firstly the Select dialog is responsive, while the Value Help dialog is not. So the Select dialog is more useful as I often need to prototype for phone and tablet as well as desktop. Secondly the Select dialog is simple enough for a prototype. The Value Help is just a bit too much especially if my users haven't used SAP screens before.
Now remember this is still just a prototype - not a full app.
So I do NOT expect to actually select anything.
I just simulate the process of showing a value help list and selecting a value.
Trying it out for Yourself
To test this out yourself this is the basic flow to follow.
Step 1: Create a project in BUILD
Nothing special here. Just a regular BUILD project will do.
Step 2: Add your Page
Start Prototyping and add a simple one page file.
It doesn’t matter too much what type of page.
I’ve used a Responsive Page so I can check the behaviour with different form factors (desktop, tablet, phone).
Step 3: Add an Input control to your Page
Again nothing special here.
In my example I've added 2 Input controls: one to show the Value Help and the other is just a plain Input control for comparison.
Step 4: Turn on Show Value Help on the Input Control
Turn on the option to show the Value Help icon for the Input Control.
Select the Input control.
In the right hand Properties pane, turn on the switch Show Value Help.
The Value Help icon will now show in the Input control.
Back in the properties pane, change the Interaction to Value Help Request, and the action to Show Dialog.
The Dialog Name property will appear.
Step 5: Create a Dialog page to hold the Value Help list
Using the drop down in Dialog select add Dialog. A new Dialog will be created. If this is your first dialog it will be called Dialog 1.
Over in the Outline Pane you will see Dialog 1 added as a new Page of your prototype.
Now open the Dialog 1 page.
It’s not that exciting at this point. We needto add some content.
Step 6: Set up the Dialog Page
In the Properties pane, use the Children area to add a List control and a Button control to the Content part of the Dialog pane.
Adding a list will automatically add a bunch of fancy looking list items. We want something a bit simpler for this.
So select the List control and delete all the Child Item controls from it.
Then add a single Standard List Item instead.
Clear the Info and Icon properties of the Standard List Item You should now have something that looks like this.
So now we have the screen set up much as we want it. But we need to put our list in there.
Step 7: Create the data to be displayed in the Value Help list
Go to the Data Editor and manually create a new object to hold your list, e.g. CurrencyList.
Add a single string property to it – e.g. CurrencyName – this will hold the text values that you show in your list.
Open the Samples editor and add in some values.
Press Ok to save your data.
P.S. You can also edit your list offline in Microsoft Excel and import it.
Now we need to assign our value help list to the List control in the Dialog.
Step 8: Assign the data to the Value Help list in the Dialog page
Open your Dialog pane and select the List control.
Go to the Properties pane and in the Children area look for the “bind” icon next to the Items.
Click on the bind icon and as we have only one object it will automatically bind it to the CurrencyList.
As an added bonus it automatically assigns the ID of your object to the Title and the new string property to the Info.
You can use these or change these as you wish. You can even use the icon if you want to.
And you'll notice that your value help list now appears in the dialog.
Step 9: Initial Test of your Prototype Value Help
If you preview your prototype at this point you can use the Value Help icon on the Input control to show the list.
However you may notice that you there is no way provided to get back to Page 1 of your prototype.
So lastly we set up the actions to simulate closing the value help dialog.
Step 10: Simulating Selecting Value and Cancel
To be realistic we should have two ways of closing the dialog page… either:
- The user backs out of the value help without selecting anything, or
- The user selects a value from the value help list
Remember it’s only a prototype – not a real app – so we won’t actually be selecting anything. Hint: You can always fill in the Input control with a set value to show what the selected value would look like on the main page.
Back in the Prototype Editor on our Dialog Page …
First set up a Cancel option to back out without selecting anything.
Find the Button control at the bottom of the Dialog pane. Change:
- the Text property to Cancel
- the Action to Close.
Next to simulate selecting a value.
Select the List control in the Dialog pane. Change:
- the Interaction to Selection Change and
- the Action to Close.
Final Test of your Prototype Value Help
Now preview your app.
Use the value help button on your input control to show the value help dialog and close the dialog by selecting a value or pressing the Cancel button.
Job done!
If you have a BUILD login account, you can see my example BUILD prototype in action.
- SAP Managed Tags:
10 Comments
