Alternative for right click functionality in Xpress

[JasonBev]

To use shortcut notes users right click in the desktop version.

For mobile there is currently no functionality, can a dropdown button (or similar functionality) be added as a control, similar to the datepicker to enable a selection list to be used.

[paulfisher53]

Try this code to add a dropdown in the grid editor:

//Desktop version, show right click menu.
if(viewer.GetPageGrid() && !Application.IsInMobile()){
  viewer.GetPageGrid().OnRightClick = function(rowid,irow,icol,e){
    var prevNote = viewer.Record().Notes;
    if(shortcuts){
      UI.ContextMenu(shortcuts,function(val){
        if (prevNote !== null) {
          val = prevNote+", "+val;
        }
        viewer.RecordValidate("Notes",val,rowid);   
      });
    }
  };
}

//Mobile version, add selection to grid editor.
if(Application.IsInMobile() && viewer.Page().Type == "Card"){

  //Create dropdown.
  var selShortcut = $("<select />");
  viewer.Control("Notes").Control().after(selShortcut);
  selShortcut.append("<option>--Select a shortcut--</option>");  
  for(var i = 0; i < shortcuts.length; i++){
    selShortcut.append("<option>"+shortcuts[i].Name+"</option>");
  }

  //On select of a shortcut....
  selShortcut.selectmenu().on("change",function(){
    var val = selShortcut.val();
    if(val !== "--Select a shortcut--"){
      var prevNote = viewer.Record().Notes;
      if (prevNote !== null) {
        val = prevNote+", "+val;
      }
      viewer.RecordValidate("Notes",val);  
      selShortcut.val("--Select a shortcut--").selectmenu( "refresh", true );
    }
  });
}

[JasonBev]

As the html select option used here doesn't support it, is there anything currently in the framework (e.g jquery) to include
formatting for the options similar to the UI.ContextMenu functionality?

[paulfisher53]

What sort of formatting do you need? Like HTML support?

[paulfisher53]

What if you use the DDSlick control instead of the selectmenu? I think that control allows html for its items

[JasonBev]

Ah yep.

DDSlick would be suitable for HTML input purposes as an existing framework plugin, no further work needed by liveapp.

[JasonBev]

DDSlick alternative to above (with grouping)

 if(Application.IsInMobile() && viewer.Page().Type == "Card"){
    //Create dropdown.
    var selShortcut = $('<div id="scut">');
    var group = 0;
    var label = "";
    viewer.Control("Notes").Control().after(selShortcut);
    var ddBasic = [];
    for(var i = 0; i < shortcuts.length; i++){
      label = shortcuts[i].GroupName;
      if (group !== shortcuts[i].GroupID){
        ddBasic.push({text: label, description: shortcuts[i].Name});
      }
      else {
        ddBasic.push({description: shortcuts[i].Name});
      }
      group = shortcuts[i].GroupID;
    }
    $('#scut').ddslick({
      data: ddBasic,
      selectText: "Select a shortcut",
      //On select of a shortcut....
      onSelected: function(selectedData){
        var val = selectedData.selectedData.description;
          var prevNote = viewer.Record().Notes;
          if (prevNote !== null) {
            val = prevNote+" "+val;
          }
          viewer.RecordValidate("Notes",val);
          $('.dd-selected-description').text('Select another shortcut').css('color', 'black');
          $('.dd-selected-text').remove();
      }
    });
  }

[paulfisher53]

Nice, thanks for coding that up