Verified Answers

If an answer to your question is correct, click on "Verify Answer" under the "More" button. The answer will now appear with a checkmark. Please be sure to always mark answers that resolve your issue as verified. Your fellow Community members will appreciate it!  Learn more

  • State Suggested Answer
  • Replies replies
    4
  • Answers answer
    1
  • Subscribers subscribers
    169
  • Views views
    429
  • Users 0 members are here
  • Locked Locked
Related
Options
This discussion has been locked.
You can no longer post new replies to this discussion. If you have a question you can start a new discussion

Revisiting the Display of a Relational Field. I only want to show the values that are in the field.

redbug2

I have an aux table with 30 values. The values are Install Environments for a release process. 

I have a multi-relational field that I connect to the Aux table. 

The user selects the values they require on their update form. 

At a later point they may choose to install those values that were selected 

I can turn off the values that are available to them using the javascript shown below.  The display shows the entire aux table values but the javascript will hide the check boxes that are not in the multirelational array. 

It's a nice little bit of javascript.

What I would really like it to do is to entirely hide the field value and not just its checkbox. Similar to how the field displays on the State form. It only shows the values that are selected. 

Any ideas? 


if (GetFieldWidgetByName) {
var x = $(GetFieldWidgetByName("AVAILABLE_LOWER_ENVIRONMEN")).find(":checkbox(':checked')");

var lengthvar = x.length;
for (i = 0; i < x.length; i++)

var y = x[i].checked;
var z = x[i].value;
if ( y == true )
{
$("[value='"+ x[i].value +"']").attr("checked",false); // Makes sure the field is unchecked for available items.
}
else
{
$("[value='"+ x[i].value +"']").hide(); //Makes the checked items read only. 
}
}

This is the transition form outuput. It's showing all of the aux table values. 




This is the State form Output. I would like the state form output with checkboxes Only shows the selected items. 

Parents
  • 0

    I'm not using checkboxes, however I do hide values from item type via javascript

    var myField = jQuerySBM(GetFieldByName("Item Type"));
    myField.find("option:contains('Retire')").remove();
    myField.find("option:contains('Impact Subtask')").remove();

  • 0 in reply to 

    I can't understand if you want to change the State form or the Transition form.  I've got some JS that does both.  This will add a Checkbox to the multi-relational field on a State form so that it looks more like a transition form.  The checkboxes are disabled because we don't want the user clicking on them thinking that might do something.  Put this in a JS widget on the form.  You'll need to supply the field name of the multi-rel field in the call to "Add_Chkboxes_to_MultiSel_on_State_Form("<field name here>");".  In my demo screenshots the multi-relational field is called "Installation Environments"

    In Composer, the Multi-rel field settings are:

    Options / Style: Checkboxes

    Options / Search and query: Appears in report field lists; Show full list

    Forms are "Standard layout" and NOT "Legacy mode".

    function Add_Chkboxes_to_MultiSel_on_State_Form(strFld) {
    let msel_fid = _LookupField(strFld)?.fid ;
    if (msel_fid) {
    // find the SPAN elements contained in the specified field's WRAPPER.
    let spans_elts = document.querySelectorAll("#" + msel_fid + "\\.wrapper span") ;

    if (spans_elts.length > 0) {
    spans_elts.forEach((elt,idx) => {
    // console.log("elt=",elt,"; idx=",idx);
    // let new_elt = document.createElement();
    // elt.before( new_elt ) ;
    // insert a Checked checkbox before the element's text.
    elt.insertAdjacentHTML("beforebegin",'<input type="checkbox" id="' + msel_fid + '.chkbox' + '" checked="checked" disabled="disabled">');
    elt.insertAdjacentHTML("beforebegin",'&nbsp;');
    });
    }

    } else {
    alert("Can't find field '" + strFld + "'");
    }
    }

    Add_Chkboxes_to_MultiSel_on_State_Form("Installation Environments");

    Here's another function for a Transition form that will hide the elements that are already selected.  I don't know why you'd do this because it prevents users from "deselecting" an environment -- they can only add environments.  Again, you'll need to specify the name of the multi-rel field.

    function Hide_Selected_MultiSel_items_on_Xstn_Form(strFld) {
    let msel_fid = _LookupField(strFld)?.fid ;
    if (msel_fid) {
    // find the "checked" INPUT elements with the specified field ID contained in the specified fields WRAPPER.
    let spans_elts = document.querySelectorAll("#" + msel_fid + "\\.wrapper input#SELECT_" + msel_fid + "[checked]" ) ;

    // Delete, hide or ignore :
    // Hide the "checked" INPUT element.
    // Hide the LABEL element that follows it.
    // Delete the text that is part of the LABEL element.
    // Ignore (skip the SCRIPT element).
    // Delete the "&nbsp;&nbsp;" text.
    // Hide the ANCHOR element that follows that.
    // Delete the IMG tag within the ANCHOR.
    // Delete the BR tag that concludes the line comprising the Multi-sel Aux table record.

    if (spans_elts.length > 0) {
    spans_elts.forEach((elt,idx) => {

    /*
    console.log("INPUT elt=",elt);
    console.log("LABEL next=",elt.nextSibling);
    console.log("#TEXT !!next=",elt.nextSibling.nextSibling);
    console.log("SCRIPT next=",elt.nextSibling.nextSibling.nextSibling);
    console.log("TEXT !!next=",elt.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("ANCHOR next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("IMG !!next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("BR next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    */

    // Hide the hidable elements.
    // Get references to the elements that can't be hidden and will be deleted.
    // Don't delete elements that HTML will send back to server as part of the list of items selected.
    elt.setAttribute("hidden","hidden");
    elt.nextSibling.setAttribute("hidden","hidden");
    elt_textnode = elt.nextSibling.nextSibling;
    // elt.nextSibling.nextSibling.nextSibling.setAttribute("hidden","hidden");
    elt_txt = elt.nextSibling.nextSibling.nextSibling.nextSibling;
    elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.setAttribute("hidden","hidden");
    elt_img = elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;
    elt_br = elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;

    // Now delete the elements that we can't hide. I'm doing this starting with last element within the HTML to be removed.
    elt_br.remove();
    elt_img.remove();
    elt_txt.remove();
    elt_textnode.remove();

    });
    }

    } else {
    alert("Can't find field '" + strFld + "'");
    }

    }
    Hide_Selected_MultiSel_items_on_Xstn_Form("Installation Environments");

    Here's screen shots of State and Transition forms "as-is" and after running the appropriate JS.

        

      

         

         

    I pasted the code with the "Format / Inline / Code".  That seems to have removed all the leading whitespace.

    The JS is probably more-or-less hard-coded to the HTML used to display Multi-Relational fields in SBM 11.8.  I don't know how the HTML changed from version to version.

Reply
  • 0 in reply to 

    I can't understand if you want to change the State form or the Transition form.  I've got some JS that does both.  This will add a Checkbox to the multi-relational field on a State form so that it looks more like a transition form.  The checkboxes are disabled because we don't want the user clicking on them thinking that might do something.  Put this in a JS widget on the form.  You'll need to supply the field name of the multi-rel field in the call to "Add_Chkboxes_to_MultiSel_on_State_Form("<field name here>");".  In my demo screenshots the multi-relational field is called "Installation Environments"

    In Composer, the Multi-rel field settings are:

    Options / Style: Checkboxes

    Options / Search and query: Appears in report field lists; Show full list

    Forms are "Standard layout" and NOT "Legacy mode".

    function Add_Chkboxes_to_MultiSel_on_State_Form(strFld) {
    let msel_fid = _LookupField(strFld)?.fid ;
    if (msel_fid) {
    // find the SPAN elements contained in the specified field's WRAPPER.
    let spans_elts = document.querySelectorAll("#" + msel_fid + "\\.wrapper span") ;

    if (spans_elts.length > 0) {
    spans_elts.forEach((elt,idx) => {
    // console.log("elt=",elt,"; idx=",idx);
    // let new_elt = document.createElement();
    // elt.before( new_elt ) ;
    // insert a Checked checkbox before the element's text.
    elt.insertAdjacentHTML("beforebegin",'<input type="checkbox" id="' + msel_fid + '.chkbox' + '" checked="checked" disabled="disabled">');
    elt.insertAdjacentHTML("beforebegin",'&nbsp;');
    });
    }

    } else {
    alert("Can't find field '" + strFld + "'");
    }
    }

    Add_Chkboxes_to_MultiSel_on_State_Form("Installation Environments");

    Here's another function for a Transition form that will hide the elements that are already selected.  I don't know why you'd do this because it prevents users from "deselecting" an environment -- they can only add environments.  Again, you'll need to specify the name of the multi-rel field.

    function Hide_Selected_MultiSel_items_on_Xstn_Form(strFld) {
    let msel_fid = _LookupField(strFld)?.fid ;
    if (msel_fid) {
    // find the "checked" INPUT elements with the specified field ID contained in the specified fields WRAPPER.
    let spans_elts = document.querySelectorAll("#" + msel_fid + "\\.wrapper input#SELECT_" + msel_fid + "[checked]" ) ;

    // Delete, hide or ignore :
    // Hide the "checked" INPUT element.
    // Hide the LABEL element that follows it.
    // Delete the text that is part of the LABEL element.
    // Ignore (skip the SCRIPT element).
    // Delete the "&nbsp;&nbsp;" text.
    // Hide the ANCHOR element that follows that.
    // Delete the IMG tag within the ANCHOR.
    // Delete the BR tag that concludes the line comprising the Multi-sel Aux table record.

    if (spans_elts.length > 0) {
    spans_elts.forEach((elt,idx) => {

    /*
    console.log("INPUT elt=",elt);
    console.log("LABEL next=",elt.nextSibling);
    console.log("#TEXT !!next=",elt.nextSibling.nextSibling);
    console.log("SCRIPT next=",elt.nextSibling.nextSibling.nextSibling);
    console.log("TEXT !!next=",elt.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("ANCHOR next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("IMG !!next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    console.log("BR next=",elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
    */

    // Hide the hidable elements.
    // Get references to the elements that can't be hidden and will be deleted.
    // Don't delete elements that HTML will send back to server as part of the list of items selected.
    elt.setAttribute("hidden","hidden");
    elt.nextSibling.setAttribute("hidden","hidden");
    elt_textnode = elt.nextSibling.nextSibling;
    // elt.nextSibling.nextSibling.nextSibling.setAttribute("hidden","hidden");
    elt_txt = elt.nextSibling.nextSibling.nextSibling.nextSibling;
    elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.setAttribute("hidden","hidden");
    elt_img = elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;
    elt_br = elt.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;

    // Now delete the elements that we can't hide. I'm doing this starting with last element within the HTML to be removed.
    elt_br.remove();
    elt_img.remove();
    elt_txt.remove();
    elt_textnode.remove();

    });
    }

    } else {
    alert("Can't find field '" + strFld + "'");
    }

    }
    Hide_Selected_MultiSel_items_on_Xstn_Form("Installation Environments");

    Here's screen shots of State and Transition forms "as-is" and after running the appropriate JS.

        

      

         

         

    I pasted the code with the "Format / Inline / Code".  That seems to have removed all the leading whitespace.

    The JS is probably more-or-less hard-coded to the HTML used to display Multi-Relational fields in SBM 11.8.  I don't know how the HTML changed from version to version.

Children
No Data

Resources

Support
Documentation
Learning Services
Partner Programs
Privacy
Compliance
Help
Company
Privacy Policy
Terms of Use
Cookies Preferences
Accessibility
Anti-Slavery Statement
Support
Contact Us
Careers
Code of Business Conduct and Ethics
The opinions expressed above are the personal opinions of the authors, not of OpenText. By using this site, you accept the Terms of Use. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.), Hewlett Packard Enterprise Company, or Micro Focus. As of January 31, 2023, the Material is now offered by OpenText, a separately owned and operated company. Any reference to the HP, Hewlett Packard Enterprise/HPE, and Micro Focus marks is historical in nature and the HP, Hewlett Packard Enterprise/HPE, and Micro Focus marks are the property of their respective owners.