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

[htammen]

Hi Wouter,

great contribution. Will try it next week 

Thanks Helmut

[rafael_menezes]

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

[WouterLemaire]

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

[rafael_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.

[WouterLemaire]

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

[former_member393815]

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.

[former_member604247]

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?

[VictorHo]

Hi c3d1947136cd4c748a7aa794001af496 ,

Thank for great contribution.

Could I use the code in my product?

Thanks.

[jmattfeld]

Hi c3d1947136cd4c748a7aa794001af496!

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!

[WouterLemaire]

Yes, it is being used somewhere in production. 🙂

[former_member616097]

Hello c3d1947136cd4c748a7aa794001af496

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