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