Extending Leap with a Custom Dashboard

I recently encountered a client requirement that was not easily handled by Leap’s out-of-the-box controls. The application that we built used a form as a dashboard, where a service was used to pull data from other form records into view. These records were presented to the user, but the client wanted to be able to perform operations from that dashboard view. The operations included launch, print, delegate and cancel.

As you can see from the image this is a very different look from any item type that Leap provides on the palette. What you see is an HTML item and its content was dynamically built. There are some immediate benefits to generating the table rather than rending Leap’s table item. We can add buttons, as seen in the last column, that can take custom actions on the related row. We also have more control over the styling of the table and its content

Let’s look at how we accomplished this customization. The table data is retrieved using a service call and the data is mapped to a table item. There is an onCallFinished handler, which executes after the service has completed to iterate over the results and create the custom HTML. The handler is in the onLoad event:

var srv = form.getServiceConfiguration('SC_GetClients');
 srv.connectEvent("onCallFinished", function(success)
 {  
    if(success) {    var pg = form.getPage("P_NewPage1");    
    pg.F_CustomTableView.setContent(app.getSharedData().printTable(pg, BO.F_Table1));  
    }
  });

The printable function is responsible for the magic. I will focus the rest of this discussion on how the buttons function within the customized table view. Any HTML is fair game as you think about what you want to show your audience. The challenge in this is that we are dynamically building javaScript code that will be built at runtime. Let’s start with the launch button. The first thing that we do is add the HTML button:

var launchBtnID = "launch_" + get(row,"F_RID").getValue();
    s += "<td><a id='" + launchBtnID + "' href='/forms/secure/1/app/" + appid + "/launch/index.html?
    form=F_Clients&id=" + get(row, "F_RID").getValue() + "' target='_blank' title='Launch Form'><img src='" +
    app.getImageBaseURL() + "FormIcon.png' class='launchFormBtn'/></a></td>";

The second thing is to create the event listener that will execute when the button is clicked:

  s += "<script type='text/javascript'>";
      s += "setTimeout(function() {";
      s += "var launch_btn = byId('" + launchBtnID + "');";
      s += "launch_btn.addEventListener('click', function() {";
      s += "var form = app.getForm('F_Form1');";
      s += "var theBO = form.getBO();";
      s += "theBO.F_FormLaunchDetected.setValue(true);";
      s += "});";
      s += "}, 0);";
      s += "</script>";

Do you see how this can get tricky? The print function is building a string that will be set into the HTML item. As we build this string we are using some hard-coded items as well as variables that are available at the time the string is being compiled. We are also creating some variables that will be established at run-time, when the button is clicked. This can be somewhat tedious code as a misplaced quotation could break the whole thing.

The beauty of this is that we can access the Leap business object and can then set any item we like based on the user’s action. The product team is evaluating how we can provide some of this flexibility in a more accessible manner. For those projects that require special formatting this technique can be extremely powerful.

Something I have teased in this example, but have not completed the implementation is showing your own custom input controls that can then feed back to Leap form controls. The Yes/No radios in this table view are not represented in the database, therefore if we want to maintain these values we must feed them back to actual Leap items. If a user selected yes or no, then that value would be recorded in the main record, which could be accomplished by making an update service call.

We hope that you have learned something today. This is a more difficult technique that does require some coding knowledge/experience. This could be used to tighten up your on-screen experience when presenting a dashboard that includes multi-form interaction. This sample was built on version 8.6.4.2 and can be imported into any 8.6.4+ environment.

If you have any questions or comments let us know!

Christopher Dawes
Consultant Software Engineer, HCL Leap