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.

/wp-content/uploads/2016/03/finalvaluehelp1_911975.jpg

/wp-content/uploads/2016/03/finalvaluehelp2_911976.jpg

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

BUILD – from the outside

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.

Input Show Value Help.jpg

The Value Help icon will now show in the Input control.

Input VAlue help icon.jpg

Back in the properties pane, change the Interaction to Value Help Request, and the action to Show Dialog.

The Dialog Name property will appear.

actions pane.jpg


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.

Input Value Help Dialog 1 in Outline.jpg

Now open the Dialog 1 page.

empty dilalog pane.jpg

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.

Outline pane structure value help.jpg

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.

/wp-content/uploads/2016/03/samplevaluehelplist_911986.jpg

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.

/wp-content/uploads/2016/03/listbindbefore_911993.jpg

Click on the bind icon and as we have only one object it will automatically bind it to the CurrencyList.

/wp-content/uploads/2016/03/listbindafter_911994.jpg

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.

standardlist itembinding.jpg

And you’ll notice that your value help list now appears in the dialog.

/wp-content/uploads/2016/03/valuehelplist_911996.jpg

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:

  1. The user backs out of the value help without selecting anything, or
  2. 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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

      1. Jocelyn Dart Post author

        THat’s correct! Archive is the way to delete projects in BUILD. You’ll find it right down the bottom of the project overview for that project

        (0) 
  1. Frank Parsons

    Hi

    Does anyone know how to un-publish a project?  When I published my project there was a bug, I have removed the bug, but I am unable to make a new URL republish?

    anyone?

    (0) 
    1. Arijit Das

      Hi Frank Parsons

      You should be able to make as many changes and re-publish your prototype each time. However, please note that the URL will not change with each publish, It will remain the same.

      Regards

      Arijit

      (0) 

Leave a Reply