Skip to Content
Author's profile photo Wouter Lemaire

UI5 ValueHelpDialog Helper / Wrapper object

Introduction

UI5 has a lot of components that you can use with great out-of-the-box features. With only a few lines of coding you can use these UI5 components. But some more advanced UI5 components require more than just a few lines. For example the ValueHelpDialog requires a lot of coding to use.

For more information about the component:     

https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.comp.valuehelpdialog.ValueHelpDialog/samples

I needed to use the ValueHelpDialog and I don’t like it to have too much code in my controller. Therefore I created a helper/wrapper object for the ValueHelpDialog. With this helper/wrapper I could just use the ValueHelpDialg with a few lines of code in my controller. But I also made it more generic and easier to use.

To help other developers that want to use this UI5 component I share this helper/wrapper object.

How to use this ValueHelpDialog Helper/Wrapper

  • Same as for the normal ValueHelpDialog, add the input field to your view:
    • Give the input field an ID
    • Define a function for the valueHelpRequest event

<MultiInput id="valuehelp1" valueHelpRequest="onValueHelpRequest" valueHelpOnly="true" />
  • Configure all the fields of the table in the valuehelp in the onInit of the controller
    • For every column:
      • Label –> The label of the column
      • Key –> define a column id
      • Iskey –> set column as key
        • Two keys are required
      • Searchable –> add a field to the advanced search
      • Width –> set the width of a column
      • Search –> the main search of the ValueHelpDialog

this.fields = [
                                                     {label:"Column1", key: "Col1", searchable:false, iskey:true,search:true},
                                                     {label:"Column2",key:"Col2", searchable:true, iskey:true},
                                                     {label:"Column3",key:"Col3", searchable:true,width:"30rem"}
                                                  ];
  • Create an object of the ValueHelpDialog Helper/Dialog in the onInit of the controller
    • The constructor requires
      • Model with the data
      • Inputfield
      • Fields configuration
      • Title

this.valuehelp = new ValueHelpHelper(this.getView().getModel(),this.getView().byId("valuehelp1"),this.fields,"Title");

  • In the onValueHelpRequest function you can now just open the ValueHelpDialog
    • Function requires:
      • Binding
      • onSelectionCallback
      • onCancelCallback

onValueHelpRequest: function() {
  var me = this;
this.valuehelp.openValueHelp("/items",
function(selection,ctx){
                var oView = this.getView();
                console.log("Selection text: " + selection.getText());
                console.log("Selection key: " + selection.getKey());
          
    },
function(ctx){
                console.log("cancel");
},this);
}

Full code of the controller:


sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"be/wl/valuehelp/controllers/ValueHelpHelper"
], function (Controller, JSONModel,ValueHelpHelper) {
"use strict";
return Controller.extend("be.wl.valuehelp.controllers.main", {
    
onInit:function(){   
var items = [{Col1:"row1 col1",Col2:"row1 col2",Col3:"row1 col3"},
                     {Col1:"row2 col1",Col2:"row2 col2",Col3:"row2 col3"}];
this.getView().setModel(new JSONModel({items:items}));
this.fields = [
                                                           {label:"Column1", key: "Col1", searchable:false, iskey:true,search:true},
                                                           {label:"Column2",key:"Col2", searchable:true, iskey:true},
                                                           {label:"Column3",key:"Col3", searchable:true,width:"30rem"}
                                                     ];
                                               this.valuehelp = new ValueHelpHelper(this.getView().getModel(),this.getView().byId("valuehelp1"),this.fields,"Title");
      },
                          onValueHelpRequest: function() {
                                     var me = this;
this.valuehelp.openValueHelp("/items",
                                       function(selection,ctx){
                                                   var oView = this.getView();
                                                   console.log("Selection text: " + selection.getText());
                                                   console.log("Selection key: " + selection.getKey());
                                             
                                       },
                                       function(ctx){
                                                   console.log("cancel");
                                     },this);
                          }
    });
});

Demo

  • Main search comes from the configuration property search
  • Additional search fields comes from the configuration property searchable

/wp-content/uploads/2016/02/demo1_890218.png

After search:

/wp-content/uploads/2016/02/demo2_890247.png

After selection you’ll get the two keys in the input field:

/wp-content/uploads/2016/02/demo3_890250.png

You can find the full code and demo on plunker:

https://plnkr.co/edit/S4lUbxkCcnR2VJ7APzTb?p=preview

Hope it’s useful!

Kind regards,

Wouter

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Helmut Tammen
      Helmut Tammen

      Hi Wouter,

      great contribution. Will try it next week 

      Thanks Helmut

      Author's profile photo Rafael Silva de Menezes
      Rafael Silva de Menezes

      Terrific document! I'm trying to use it with a regular Input field. Is it possible? I'm getting errors when calling setTokens...

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Normally, yes. Can you be more specific about these errors?

      Author's profile photo Rafael Silva de Menezes
      Rafael Silva de Menezes

      Sorry for taking so long to answer to your comment. Actually, I've figured out by myself how to do it. You know, I'm kind of a beginner in this SAPUI5/GW/ABAP stuff.

      For many years, I've been a senior ABAP developer, but now I became a SAPUI5/GW/ABAP little baby. Sometimes I can't solve my problems because I can't even know how to ask. That's what happened with the question right above.

      Thx in advance for trying to aid me.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      For UI5 related questions, you can join this slack channel: https://slackui5invite.herokuapp.com/

       

      A lot of experts are always online and ready to help you!

       

      Kr, Wouter

      Author's profile photo Sergiu-Iulian Popa
      Sergiu-Iulian Popa

      You probably found the issue already, but for others: setTokens can’t be used on regular Input fields because this is a method of MultiInput.

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      Is there a reason I'm getting a loading error? I'm using webIDE and included this in my sap.ui.define as well and change the path in helper as well. Anything else?

      Author's profile photo Quoc Vuong Ho
      Quoc Vuong Ho

      Hi Wouter Lemaire ,

      Thank for great contribution.

      Could I use the code in my product?

      Thanks.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Yes, it is being used somewhere in production. 🙂

      Author's profile photo Jan Mattfeld
      Jan Mattfeld

      Hi Wouter Lemaire!

      Just came across a legacy app using a local JSON model, needed to add a ValueHelpDialog and thought how hard could it be?! Turns out a wrapper like this actually makes a lot of sense 😉

      With the fields already defined, I also added auto suggest. As this ValueHelp is part of several apps, it's probably also a nice use case for a re-use library.

      If there is (basic) OData metadata available, one could make it even more generic. Yet, I feel like I re-invented a (poor man's) SmartControl, all because direct OData binding is not possible.

      Thanks!

      Author's profile photo Hemilkumar Prajapati
      Hemilkumar Prajapati

      Hello Wouter Lemaire

      If We want to show selected values in ValueHelp Dialog then what should we do?

      Can we bind with oData and show selected value of MultiInput in ValueHelp Dialog?

      and last one Can we show filtered field in valuehHelp filter bar?

       

      Many Thanks,
      Hemil