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.

5 Comments

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

      1. 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.

        (1) 
        1. Wouter Lemaire Post author

          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

          (0) 

Leave a Reply