Overview

Skill Level: Intermediate

How to use "Single Select" coach views inside of Table elements, to select String values, without updating the entire list.

Ingredients

Version of BPM that uses Spark UI as stock coach views (v8.5.7 used for example) 

Step-by-step

  1. Introduction

    One of the first things new users of Spark UI out of the box coach views will realize, is that they are very different from the old versions. There are many improvements such as customization and event declaration, but there are still a number of bugs that need to be ironed out that could cause frustation when trying to implement solutions for your company or clients.

     

    The primary issue addressed in this article refers to using “Single Select” coach views inside of a “Table”, and a practical workaround until the code is updated in later releases.

  2. Recreating the Problem

    When a table is created with a “Single Select” coach view in reach row, it is expected that those coach views will act independently of each other. When a value is selected in one row, no other rows should be affected. At least for the current version of stock coach views, this is not the case.

    Lets first walk through the steps needed to recreate this error.

    • Create a Client-side Human service
    • Create 2 private variables
      • data (list of NameValuePairs)
      • values (list of NameValuePairs)
    • Initialize both of these lists with 3 elements (for this simple example “a”,”b”,”c” used for both name and value)
    • Go to the coach editor and drop in a stock “Panel”
    • Add a stock “Table” to the “Panel” added above
    • Add a stock “Single Select” to the “Table” added above
    • Bind the “data” list to the table
    • Bind the data.currentItem.name to the “Single Select”
    • Go to the “Single Select” > Configuration > Items > Item Lookup Mode: and set value to “Items from Config Option”
    • Go to the “Single Select” > Configuration > Items > Item Input Data: and bind to “values” list we initialized before

     

    img1

  3. Test the Results

    When this coach is run you should see a table with 3 drop down single selects, with the values “a”, “b”, and “c” respectively.

     

    img2

     

    Everything good so far. Now change one of those values and see how the rest of the table reacts.

     

    Suddenly all the select values get changed….

  4. Understanding the problem

    To get a better understanding of what’s happening behind the scenes, lets add another column to our Table we created above. Do this by dragging an “Output Text” coach view into the Table and assigning it to the same value as the “Single Select”: data.currentItem.name. When we run the test we did in Step 3 again, we see the output values are being updated correctly, regardless of what is being shown in “Single Select”s.

     

    From this we can tell that at least the Bound Data is accurate, it’s just a display issue.

     

    img3

  5. Addressing the issue

    The easiest solution I was able to come up with to resolve the issue (albeit a band-aid fix) was to add the following line of code to the On Load event of the “Single Select”:

     

    var _this=this; this.context.element.children[0].children[1].children[0].onchange=function() {_this.context.binding.set(“value”,this.value);}

     

    Retesting Step 3 with this new code produces the expected results (“Single Select” boxes and Bound Data both being updated correctly)

  6. Why is this needed?

    From the best I can tell, there is a conflict with the way “Single Select” coach views update their display using the coach view Control ID (the value you see under general options for the coach view element). When implemented in a table, all of those coach views share the same Control ID.¬†When they attempt to update their value during the On Change event using the Control ID, the displays of all objects sharing the same Control ID are updated at the same time.¬†

     

    To resolve this issue, the code give above overwrites the onchange event of the html “select” element to instead¬†change the bound value to the value currently displayed in the “Single Select” coach view. This updates the value as needed, and avoids any reference to the Control ID that is the likely cause of the issues seen above.

  7. Remaining Issues

    This recipe is meant as a simple band-aid solution for a limited use case. After playing around with the solution you will likely realize that only works for a handful of cases (specifically assigning the displayed value to the bound string variable).

     

    If you are trying to use a “Table” to¬†display a list of strings (using the “Single Select” elements), this will still not work (The coach view will throw an error when trying to use the simple type)

    If you are attempting to display one part of a complex object in the “Single Select”, and assign a different part to the bound variable (ie. Name vs Value), the solution will need to be modified.

    If the displayed value is to be assigned to a bound variable that is not a String, it may work, but no promises.

     

    At the end of the day the “Single Select” coach view is very complex,¬†and the Table coach view even more so. It is obviously preferable that the two work together correctly, but as of now that is not the case. As a band-aid, temporary fix, until an actual fix patch is released: this solution should hopefully fill the basic needs you may have in adding a select box to a table using the new BPM UI stock elements. For more advanced needs: hopefully the explanation of the issue, and the basic solution, will provide a groundwork to build upon.

Join The Discussion