Adding a Button, Hyperlink or Other HTML to a User Application Page



By: jwinney

June 30, 2009 11:22 am

Reads: 423

Comments:0

Rating:0

Add Custom HTML Content to User Application Pages.

This guide only applies to pages where there are labels and textboxes, for example “Edit Your Information”. This is because there are no HTML ID tags in view modes, making navigating to the area to modify very difficult. You can add a spare attribute or modify an existing one. In this example, we use a spare attribute ‘Jack Number’ and modify its appearance from a text box to a button, which opens a JavaScript window to another page.

The code alters the rendered page, not the source.

Adding a button, hyperlink or other HTML to a User Application page.

  1.  If required, add an attribute to the DAL using Designer to display on your page.
  2. View the source of the page in User Application and find the name given to the label of the attribute. e.g. MyProfile_DetailPortletjackNumber_lbl
  3. In the root of your User Application e.g /opt/novell/idm/jboss/server/IDM/deploy/jboss-web.deployer/

    create a new HTML file with the following content, replacing the parts in bold with your label and altering the Text Label, URL and ID for the attribute.
     

    Notes: Single and double quotation marks in JavaScript need to be escaped with the backslash. eg: \”Hello World\”

    When modifying this code, put an alert(); in during testing in to trap any infinite refresh loops.

    Firefox counts empty child nodes so we have to detect which browser is being used and use different code for each.
     

    <HTML>
    <HEAD>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
    </HEAD>
    
    <script type="text/JavaScript" language="JavaScript">
    try
    {
    if (navigator.userAgent.indexOf("Firefox") != -1){ 
     parent.document.getElementById("MyProfile_DetailPortletjackNumber_lbl").parentNode.parentNode.childNodes[1].innerHTML = "<div id=\"MyProfile_DetailPortletjackNumber_lbl\"><label for=\"\">New Label:</label></div>"
     
     parent.document.getElementById("MyProfile_DetailPortletjackNumber_lbl").parentNode.parentNode.childNodes[2].innerHTML = "<span class=\"nv-fontSmall\"><input type=\"button\" name=\"mycustombutton\" id=\"mycustombutton\" value=\"Set Your Location\" class=\"nv-fontExtraSmall\" onclick=\"window.open(\'http://www.novell.com\',\'',\'location=0,menubar=0,height=500,width=620\')\"/></span>";
     
    }
    else
    {
     parent.document.getElementById("MyProfile_DetailPortletjackNumber_lbl").parentNode.parentNode.childNodes[0].innerHTML = "<div id=\"MyProfile_DetailPortletjackNumber_lbl\"><label for=\"\">New Label:</label></div>"
     
     parent.document.getElementById("MyProfile_DetailPortletjackNumber_lbl").parentNode.parentNode.childNodes[1].innerHTML = "<span class=\"nv-fontSmall\"><input type=\"button\" name=\"mycustombutton\" id=\"mycustombutton\" value=\"Set Your Location\" class=\"nv-fontExtraSmall\" onclick=\"window.open(\'http://www.novell.com\',\'',\'location=0,menubar=0,height=500,width=620\')\"/></span>";
    
    }
    } 
    catch(err)
    {
    }
    </script>
     
    <BODY>
    </BODY>
    </HTML> 
    
    
  4. In Portlet Administration, register a new instance of the iFrame portlet and name it iFrame_Hidden.

    Change the settings of this instance to remove the title bar and set the width and height to zero in Preferences.

  5.  

  6. Go to Page Admin and add the new iFrame_Hidden portlet to the page you want alter.

    Amend the url to your HTML page.

     

     

    Every time the page is rendered, the JavaScript will amend the attribute to a button, hyperlink or any other html you desire.

    Another example:

    Placing an image next to user photo:

    <HTML>
    <HEAD>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
    </HEAD>
    
    <script type="text/JavaScript" language="JavaScript">
    try
    {
    	parent.document.getElementById("MyProfile_DetailPortletUserPhoto_lbl").parentNode.parentNode.getElementsByTagName('TD')[6].innerHTML = parent.document.getElementById("MyProfile_DetailPortletUserPhoto_lbl").parentNode.parentNode.getElementsByTagName('TD')[6].innerHTML + '<br> <a href=\"<YOUR LINK>\" target=\"blank\"><img src=\"<YOU IMAGE>\" border=\"0\"></a>';
    	
    } 
    catch(err)
    {
    }
    </script>
    <BODY>
    </BODY>
    </HTML>
    
    
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

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.

Comment