UI5 ValueHelpDialog Helper / Wrapper object

[WouterLemaire]

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/s...

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