Skip to Content

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply