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

After search:

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

You can find the full code and demo on plunker:

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

Hope it’s useful!

Kind regards,

Wouter