Highlighted
Absent Member.
Absent Member.
11981 views

How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
I have a multi-relational field containing the 51 states (50 + DC) and I want to display them as checkboxes for user friendliness, since most will be non-BPM users in general. Unfortunately, so many rows means that it spans off a single page.

Does anyone have a relatively easy way to break this up into, say, 3 columns of 17? I'm not seeing a way to do this at the moment.
0 Likes
1 Solution

Accepted Solutions
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
Paul Thompson wrote:

This can be accomplished with (obviously) custom form, JavaScript and jQuery. Configure the MR to display as checkboxes. The following POC (which may not work on your version) can be a starting point. I suggest putting it into a JavaScript object ... not an HTML Javascript Widget.

Jeff Malin is the jQuery whiz around here... he can probably do the same thing in 3 lines ;-)




// Multi-Relational as Grid
// MSIE "feature" - the "console" object is only available when Developer Tools is active.
if ((typeof console == 'undefined') || (typeof console.log == 'undefined')) {
console = { log: function(){} };
}

// ----------------------------------------------------------------------------

// Build a string that contains an HTML TABLE element. We populate this with
// the checkboxes. This string is used to replace the contents of the SPAN
// element that contains the current list of checkboxes.
// Loop through all HTML checkbox INPUT elements associated with the specified
// Multi-Relational field. Each checkbox is associated with some text
// (the value displayed as per the aux table's Value Display Format setting)
// and several other HTML elements.

AddLoadCallback( function() {
var str_FldId = LookupFieldId('US_STATES') ,
str_ChkBoxGrid = LookupFieldId('table_MultiRelAsGrid') ,
n_Row=0 , n_Col=0 ,
n_ChkBoxes_PerRow = 3 ,
str_tableHtml = '';

// Initialize the table with the Multi-Relational's first INPUT element
// plus the beginning tag for the table we're going to build.
str_tableHtml = jQuerySBM( '#' + str_FldId + '\\.wrapper input[type=Hidden]')[0].outerHTML + '\r\n' ;


// "???" is the Multi-Relational fld ts_id.
// Find the SPAN element with ID="F???.wrapper", it contains all the
// checkbox INPUT elements. Iterate each INPUT element with ID="SELECT_F???".

jQuerySBM( '#' + str_FldId + '\\.wrapper input#SELECT_' + str_FldId).each( function(idx,ele) {

// "this" (and "ele") refer to the current checkbox INPUT element.
console.log(this.tagName + ';idx=' + idx + '==' + this.nextSibling.textContent);

// Fill table by columns.
if (n_Col === 0) {str_tableHtml += '' ;}


// Get the HTML elements associated with the current checkbox INPUT
// element. This should find a SCRIPT, A and BR elements.

str_tableHtml += '' ;
n_Col = (n_Col+1) % n_ChkBoxes_PerRow;
if (n_Col === 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

});

if (n_Col !== 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

jQuerySBM( '#' + str_FldId + '\\.wrapper')[0].innerHTML = str_tableHtml + '
';

// outerHTML is the INPUT element. nextSibling is the state name text.
str_tableHtml += this.outerHTML + this.nextSibling.textContent ;
jQuerySBM( this ).nextUntil('input').each( function(idx,ele) {
console.log(' ' + this.tagName + ';idx=' + idx );
// NOTE: To filter out the clickable link to the aux table, only append
// if this.tabName isn't "A"
if (this.tagName.toUpperCase() !== 'A') {
str_tableHtml += this.outerHTML + '\r\n' ;
}
});
str_tableHtml += '
' ;

});

View solution in original post

8 Replies
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
This can be accomplished with (obviously) custom form, JavaScript and jQuery. Configure the MR to display as checkboxes. The following POC (which may not work on your version) can be a starting point. Jeff Malin is the jQuery whiz around here...




// Multi-Relational as Grid
// MSIE "feature" - the "console" object is only available when Developer Tools is active.
if ((typeof console == 'undefined') || (typeof console.log == 'undefined')) {
console = { log: function(){} };
}

// ----------------------------------------------------------------------------

// Build a string that contains an HTML TABLE element. We populate this with
// the checkboxes. This string is used to replace the contents of the SPAN
// element that contains the current list of checkboxes.
// Loop through all HTML checkbox INPUT elements associated with the specified
// Multi-Relational field. Each checkbox is associated with some text
// (the value displayed as per the aux table's Value Display Format setting)
// and several other HTML elements.

AddLoadCallback( function() {
var str_FldId = LookupFieldId('US_STATES') ,
str_ChkBoxGrid = LookupFieldId('table_MultiRelAsGrid') ,
n_Row=0 , n_Col=0 ,
n_ChkBoxes_PerRow = 3 ,
str_tableHtml = '';

// Initialize the table with the Multi-Relational's first INPUT element
// plus the beginning tag for the table we're going to build.
str_tableHtml = jQuerySBM( '#' + str_FldId + '\\.wrapper input[type=Hidden]')[0].outerHTML + '\r\n' ;


// "???" is the Multi-Relational fld ts_id.
// Find the SPAN element with ID="F???.wrapper", it contains all the
// checkbox INPUT elements. Iterate each INPUT element with ID="SELECT_F???".

jQuerySBM( '#' + str_FldId + '\\.wrapper input#SELECT_' + str_FldId).each( function(idx,ele) {

// "this" (and "ele") refer to the current checkbox INPUT element.
console.log(this.tagName + ';idx=' + idx + '==' + this.nextSibling.textContent);

// Fill table by columns.
if (n_Col === 0) {str_tableHtml += '' ;}


// Get the HTML elements associated with the current checkbox INPUT
// element. This should find a SCRIPT, A and BR elements.

str_tableHtml += '' ;
n_Col = (n_Col+1) % n_ChkBoxes_PerRow;
if (n_Col === 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

});

if (n_Col !== 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

jQuerySBM( '#' + str_FldId + '\\.wrapper')[0].innerHTML = str_tableHtml + '
';

// outerHTML is the INPUT element. nextSibling is the state name text.
str_tableHtml += this.outerHTML + this.nextSibling.textContent ;
jQuerySBM( this ).nextUntil('input').each( function(idx,ele) {
console.log(' ' + this.tagName + ';idx=' + idx );
// NOTE: To filter out the clickable link to the aux table, only append
// if this.tabName isn't "A"
if (this.tagName.toUpperCase() !== 'A') {
str_tableHtml += this.outerHTML + '\r\n' ;
}
});
str_tableHtml += '
' ;

});

Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
Paul Thompson wrote:

This can be accomplished with (obviously) custom form, JavaScript and jQuery. Configure the MR to display as checkboxes. The following POC (which may not work on your version) can be a starting point. I suggest putting it into a JavaScript object ... not an HTML Javascript Widget.

Jeff Malin is the jQuery whiz around here... he can probably do the same thing in 3 lines ;-)




// Multi-Relational as Grid
// MSIE "feature" - the "console" object is only available when Developer Tools is active.
if ((typeof console == 'undefined') || (typeof console.log == 'undefined')) {
console = { log: function(){} };
}

// ----------------------------------------------------------------------------

// Build a string that contains an HTML TABLE element. We populate this with
// the checkboxes. This string is used to replace the contents of the SPAN
// element that contains the current list of checkboxes.
// Loop through all HTML checkbox INPUT elements associated with the specified
// Multi-Relational field. Each checkbox is associated with some text
// (the value displayed as per the aux table's Value Display Format setting)
// and several other HTML elements.

AddLoadCallback( function() {
var str_FldId = LookupFieldId('US_STATES') ,
str_ChkBoxGrid = LookupFieldId('table_MultiRelAsGrid') ,
n_Row=0 , n_Col=0 ,
n_ChkBoxes_PerRow = 3 ,
str_tableHtml = '';

// Initialize the table with the Multi-Relational's first INPUT element
// plus the beginning tag for the table we're going to build.
str_tableHtml = jQuerySBM( '#' + str_FldId + '\\.wrapper input[type=Hidden]')[0].outerHTML + '\r\n' ;


// "???" is the Multi-Relational fld ts_id.
// Find the SPAN element with ID="F???.wrapper", it contains all the
// checkbox INPUT elements. Iterate each INPUT element with ID="SELECT_F???".

jQuerySBM( '#' + str_FldId + '\\.wrapper input#SELECT_' + str_FldId).each( function(idx,ele) {

// "this" (and "ele") refer to the current checkbox INPUT element.
console.log(this.tagName + ';idx=' + idx + '==' + this.nextSibling.textContent);

// Fill table by columns.
if (n_Col === 0) {str_tableHtml += '' ;}


// Get the HTML elements associated with the current checkbox INPUT
// element. This should find a SCRIPT, A and BR elements.

str_tableHtml += '' ;
n_Col = (n_Col+1) % n_ChkBoxes_PerRow;
if (n_Col === 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

});

if (n_Col !== 0) {
str_tableHtml += '\r\n' ;
n_Row += 1 ;
}

jQuerySBM( '#' + str_FldId + '\\.wrapper')[0].innerHTML = str_tableHtml + '
';

// outerHTML is the INPUT element. nextSibling is the state name text.
str_tableHtml += this.outerHTML + this.nextSibling.textContent ;
jQuerySBM( this ).nextUntil('input').each( function(idx,ele) {
console.log(' ' + this.tagName + ';idx=' + idx );
// NOTE: To filter out the clickable link to the aux table, only append
// if this.tabName isn't "A"
if (this.tagName.toUpperCase() !== 'A') {
str_tableHtml += this.outerHTML + '\r\n' ;
}
});
str_tableHtml += '
' ;

});

View solution in original post

Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
Paul Thompson wrote:

Paul Thompson wrote:

blahblah




I cannot figure out how to edit or delete an existing post.
0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
I can't quite get this to work. The field seems to line up properly in three columns, but every choice reads as 'Undefined', even though clicking certain ones fires the appropriate change events, as if I had clicked 'Delaware' or whatever. I'll keep poking at it, unless you have an idea.
0 Likes
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
If table has the right number of cells (1 per state), then the loop is processing properly.

Just to verify, this is a multi-relational field, displayed as checkboxes

The script has a couple "console.log" lines that send diagnostic info to the browser's JavaScript console. If you open browser's JavaScript console/debug tool you will see what the script is reading. If you're not comfortable doing Javascript debugging, you can replace "console.log" with "alert", but you will have to click OK to each message.


I tested using Chrome.
0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
-sigh- Yes, this works. I must've screwed up the implementation of it, because I sent the code to my colleague who copy/pasted it, added the widget, and it worked fine. So I'm looking at trade schools now that I can't copy/paste code correctly.

Thanks for the code - definitely appreciated.
0 Likes
Highlighted
Acclaimed Contributor.
Acclaimed Contributor.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
Chris Vaughn wrote:

{snipsnip} So I'm looking at trade schools now that I can't copy/paste code correctly ...
😄

I know the feeling. Glassblowing for me, or maybe TIG welding.
0 Likes
Highlighted
Absent Member.
Absent Member.

Re: How can I show a Multi-Relational fields options in multiple columns?

Jump to solution
thanks for this post. Actually I was looking for the same issues as my site is in development which is about discounted rates for school shopping and more. The site is like this back to school discount codes through which students can obtain different discounts on school supplies
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.