HowTo: Change or Remove the Header in a User Application Process Request

wschreiber

By: wschreiber

June 18, 2010 12:43 pm

Reads: 510

Comments:11

Rating:0

Some IDM users who have created their own forms have asked how to change or remove the standard header that shows at the top of each Process Request form frame.

Here’s an approach that you can use to dynamically access the header.

While theoretically there is the option to locate the respective source files in IDM.war and change the code, this approach is not recommended since such changes would void your product support and can have major side effects if not implemented properly.

Another approach to globally change the contents of some header texts, e.g., the “Form Detail” text, would be to modify the string resources in IDM.war.

The alternative approach that is described here does not touch your WAR file, but programmatically modifies the header.

This also offers you the chance to make such changes to your frame header dependent on the current form, or even dependent on the user input.

This Cool Solution is subdivided into two parts:

  • The first part describes the ECMAscript methods and their effects,
  • The second part describes a test form that demonstrates the available features.

The ECMAscript library

  • Add the script library to your form

    The key element of this solution is a set of ECMAscript functions which is attached to this note (helperHeader.zip) and contains the logic to access the frame header.
    You need to add the attached script to your form. This can be done in one of two ways: as “inline script” (copy the contents of the script file into the form inline script), or as “external script” (save the script in a location where UserApp can find it). See the IDM documentation for details how to add inline or external scripts.

  • Initialize the library

    Call the initialization method “uaFormHeader_initialize( form )”
    During the initialization, the library locates the frame header and initializes the internal variables.
    Call the initialization method from the event form:onload() or anytime before using the library methods the first time.
    uaFormHeader_initialize( form ) needs to be called only once.

  • Call the header modification methods.

    There are a few main methods that you typically call:

    • hideHeaderRow( target, valHidden )

      This method hides or shows parts of the form header.

      The parameter valHidden can be set to “true” (to hide the selected part) or “false” to make the header element visible, again. Note: Use the String “true”.

      The parameter target has these valid values: 0..3, “*”, “top”
      When used with the Integers 0..3, the method hides one of the header lines 0 (Ressource), 1 (Recipient), 2 (Process Request Category), or 3 (Description).
      Note: do not hide or modify line #1 during form:onload, since the row is accessed by UserApp to display the current recipient. You may hide/modify line #1 after the form has loaded.
      The value “*” hides or shows lines 0 to 3
      The value “top” hides or shows the string shown at the top of the frame (which by default is “Step 3 of 3: Confirm and complete process request”)

    • setHeaderText( row, col, text )

      This method changes the text in one of the header lines.
      Each header line consists of 3 columns:
      The first column is basically an empty place holder, the second column contains the title (e.g., “Ressource:”), and the third column contains the variable contents.
      The parameter “row” is the line number (0..3)
      The parameter “col” is the column number (0..2)
      The parameter “text” is the new display text.
      Note: you may also add HTML tags.

The sample request form

For your convenience I have attached a test request form, that you can import into Designer (Cool Solutions – Modify Header.zip).

Before deploying you should check and update the form trustees.

When loading the form, all headers are left untouched, and my custom controls to modify the form header are displayed:

Using the checkboxes, you can show or hide each header line individually.

Or you can hide/show all line in one go.

Another checkbox allows to hide the top section of the form.

The text fields allow you to send custom text to the header.

And you can also use HTML tags in your custom header texts.

Note: Tested with RBPM 3.7.x, Internet Explorer 8, and FF 3.6.3.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Tags: , ,
Categories: Uncategorized

Disclaimer: As with everything else at NetIQ Cool Solutions, this content is definitely not supported by NetIQ, so Customer Support will not be able to help you if it has any adverse effect on your environment.  It just worked for at least one person, and perhaps it will be useful for you too.  Be sure to test in a non-production environment.

11 Comments

  1. By:boz

    Excellent work!

  2. By:dvandermaas

    The script works fine when starting workflows from the “Request Resource” button in the DashBoard.
    However, when using a page in the identity self service tab with the resource request portlet loaded , it does not work, probably because the html is different. For some reason i cannot get it to work changing the script….

  3. By:MystikWeb

    Has anyone modified the Scripts to get it working to remove all the main table from the portlet construct?

    Hey all that are interested, I managed to get this working using jQuery….

    Add the external reference to the jquery as an external script to the form.
    Then as an inline script on the form add the following:
    —————————–
    // Remove the header table from Display
    //
    $(‘div.nv-componentContainer’).find(‘>table:eq(1)’).find(‘td >table:eq(0)’).before(‘< \div>&\nbsp;< \/div>‘);
    in above remove the \ escape…

    $(‘div.nv-componentContainer’).find(‘>table:eq(1)’).find(‘td >table:eq(0)’).empty();
    —————————–
    This will place an empty

    before the header table, them remove the table from the DOM object, hiding it completely.

    It looks for div with class of nv-componentContainer, looks then for the 2nd table, then finds the first table in any td which results int he header table. Then we just remove/empty

    Tested in IE, Chrome and Mozilla all works great.

    • By:dvandermaas

      Great job, it works ! Saves me some time ;-)
      The top part :
      Complete resource request.
      * – indicates required.
      Is still visible, but that is removable with the original script is this article with hideHeaderRow( “top”, “true” );
      I wonder if that will work with some jQuery….

      • By:MystikWeb

        Yeah you should be able to turn that off with the jquery also, as that part is the simple bit.

        “Complete resource request.
        * – indicates required.”

        is wrapped entirely in its own < div > < /div > tags, so you should be able to just turn that off:

        < div class="portletTopSection" id="portletTopSection" >

        Complete process request.

        * – indicates required.
        < /div >

        So maybe with a:

        $(‘div.portletTopSection’).empty();

        However I have found that the header tabe only works IF the Show Title is true in the portlet definition. If the title is not visible, then the header table remove does not work as the HTML of the page, is again different.

      • By:wschreiber

        Yes, you can use jQuery to hide the form header lines.
        Here is a function that used jQuery APIs to hide some header lines.

        * add the jquery js as external form script,
        * add the following function to your other scripts, e.g., as inlina script
        * in a form:onload() event call the function to hide the line
        * e.g. form_hideHeader( [ true, true, true, true ] );


        /** hide form header lines (lines 0..3)
        *
        * requires jQuery (/IDMProv/javascript/jQuery/scripts/jquery-1.4.2.min.js)
        *
        // also: tr.each( function( ) { $(this).hide(); } );
        e.g. form_hideHeader( [ true, false, true, true ] );
        // line #0: prd info
        // line #1: initiator / current
        // line #2: queue time
        // line #3: assignment info
        *
        */
        function form_hideHeader( arHide )
        {
        try
        { // get the header TR list
        var tr = "";
        if ( tr.length == 0 )
        tr = $(".detaildialog > table > tbody > tr"); // is request?
        if ( tr.length == 0 )
        tr = $(".detailTopSection > table > tbody > tr", top.document ); // is approval?
        if ( tr.length >= arHide.length ) // sanity check
        {
        for ( var i=0; i {
        if ( arHide[i] )
        tr.eq( i ).hide();
        else
        tr.eq( i ).show();
        }
        }
        }
        catch( e ) {}
        }

      • By:mickelarsson

        For sure, this example must be broken, ending in an open for-loop? Or should it be understood as an example that connect to some other script fragment in the original article?

      • By:wschreiber

        Your’re right, thanks for the alert.

        The site scrapped everything that followed the “<” character in my previous post.
        Let’s try again:

        function form_hideHeader( arHide )
        {
          try
          { // get the header TR list
            var tr = "";
            if ( tr.length == 0 )
              tr = $(".detaildialog > table > tbody > tr");                       // is request?
            if ( tr.length == 0 )
              tr = $(".detailTopSection > table > tbody > tr", top.document );    // is approval?
            if ( tr.length >= arHide.length ) // sanity check
            {
              for ( var i=0; i<arHide.length; i++ )
              {
                if ( arHide[i] ) 
                  tr.eq( i ).hide();
                else
                  tr.eq( i ).show();
              }
            }
          }
          catch( e ) {}
        }
        

      • By:dvandermaas

        This works, and yes one requirement is that the Title is shown. We had to make sure that the tables were emptied and no leftover were shown (like borders) etc.
        Thx a lot !!!!

        Grtz

      • By:nathanshaw

        Couldn’t figure out how to remove it from Identity Self-Service page… not too many identifiers for the table and I’m not clever enough with jquery to figure out how to get it and kill it. :)

        I did, however, find a few others bits:

        $('div#portletTopSection').hide() // Hide the bit about required fields in stand alone page
        $('.portletTopSection').hide() // Hide it in the Make a Process Request pop-out page
        $('LEGEND').html('<img src=/logo.jpg>') // Replace that 'Form Detail' with a logo.

Comment