XPages Tip: Fixing the Display of Comboboxes, Radio Button Groups, Checkbox Groups, and Listboxes in Read Mode with Dojo

With a couple of minor adjustments to the code shown in a previous post, I now have a script that will fix the display of comboboxes, radio button groups, checkbox groups (single or multi-valued), and listboxes (single or multi-valued) all in one fell swoop!

The output of a single-value for any of these field types looks like this:

<table id="id">
  <tr>
    <td>value </td>
  </tr>
</table>

However, if you have a field with multiple values, it separates each value out into its own row, so the previous code needed to be adjusted to read the values out of all cells in the nested table. This code will concatenate multiple values to be separated by a comma and a space, but you can easily change that by modifying the code below.

<table id="id">
  <tr>
    <td>value 1</td>
  </tr>
  <tr>
    <td>value 2</td>
  </tr>
  <tr>
    <td>value 3</td>
  </tr>
...and so on...
</table>

This code, when run onClientLoad of the page, will fix all of these fields types, by replacing the table with just the value of the field, concatenating multiple values as needed.

if("#{javascript:document1.isEditable()}" == "false"){

  dojo.query('table td table[id]').forEach(function(node) {
    var value = '';

    // Get the value out of all cells in the nested table and concatenate them
    dojo.query('td', node).forEach(function(innerNode) {
      value += innerNode.innerHTML + ', ';
    });

    // Replace the table with only the value(s) (or a blank), but cut off the trailing comma
    node.outerHTML = value.substring(0, value.length-2);
  });
}

Line 1 tells it to only run in read mode. (Update the name of the document data source variable if you need to.)

Line 3 gets a handle on tables with ids that are nested inside of table cells.

Lines 7-9 search for all table cells within the table and retrieve each cell’s innerHTML, which contains a value. If there is no value, then there won’t be a table cell and it will replace the table with an empty string.

Line 12 replaces the nested with just the value that needs to be displayed.

And now the output from the example shown above looks like this, as it should:

If you run into conflicts with this affecting other tables in your page, you may need to refine the selector in line 3.

If you need to preserve the of the element and/or wrap it in a span tag like other field values, you can tweak the code accordingly.

XSnippet

The latest version of the code is posted as an XSnippet on OpenNTF

Advertisements

8 responses to “XPages Tip: Fixing the Display of Comboboxes, Radio Button Groups, Checkbox Groups, and Listboxes in Read Mode with Dojo”

  1. anukiran says :

    Brad, I have a xPage with PostNewDocument event, I want to write confirm action in the middle of the code to execute remaining part of the code, I am not able to find SSJS in the PostNewDocument event, I tried to put the message in a dialogbox and try to display Dialogbox by using getCompomnent(“Dialobox”).show but no luck, I was not able to get the dialogbox in the PostNewDocument event, all I need as something like window.confirm in the CCSS, please help me…

    • Brad Balassaitis says :

      I haven’t tried that, but maybe you could use SSJS on an XPage event (afterRenderResponse?) that checks whether the document is new and launches the dialog as needed. if (document1.isNewNote()) { //launch dialog and process}

  2. anukiran says :

    Brad, I am struggling with this following code, can you please help me?

    I have 2 date fields one is start date and the other is end date, when I select start date , I want to use start date value for the min constraints for the End Date dojo attributes:

    Start Date :

    <![CDATA[#{javascript:
    function pad(n){return n

    End Date:

    <![CDATA[#{javascript:
    function pad(n){return n

  3. anukiran says :

    Brad, I have 2 date fields one is start date and the other is end date, when I select start date , I want to use start date value for the min constraints for the End Date dojo attributes:

    Start Date :

    <![CDATA[#{javascript:
    function pad(n){return n

    End Date:

    <![CDATA[#{javascript:
    function pad(n){return n

  4. edm00se says :

    If you want to only apply it to xp:radioGroup or xp:checkBoxGroup and the line, try changing your dojo.query to:

    dojo.query(‘table td table[id*=”Group”]’)

    before the .forEach…

    This will limit it to only nested tables (I hate them, just have to deal with them on some projects) that have an id which contains the word “Group”; e.g.- computed CSJS id of “view:_id1:_id2:_id27:checkBoxGroup4”.

    This really only applies if you have other nested tables beyond the radio/check box controls.

  5. Tom Peterson says :

    My combo boxes didn’t line up properly and I was getting an extra row line above them. Your code fixed both problems. I was getting frustrated trying CSS solutions to fix the problems. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: