URL gauge variable height workaround

URL gauges can be used to display a different web page or website as part of a homepage.

URL gauges are set with a fixed height, meaning that you may have to scroll to see the entire web page in the gauge. URL gauge widths are controlled by the positioning of the gauge on a particular homepage. You cannot modify URL gauge height, but you can set up an iFrame in a UI page to manage the height.

  1. First, create a UI page. The UI page name must start with render_gadget_ (for example, render_gadget_iFrameSNC). Add the following to the HTML field, replacing the src with the URL that should appear in the iFrame. The height you specify must be a static value and you must use CSS style tags for this to work.
    <iframe id="myframe" src="http://www.service-now.com" scrolling="yes" style="height:450px; width:100%"></iframe>
  2. Next, navigate to System UI > Widgets and create or modify a widget to use for selecting your UI page from the Add content pop-up window on a homepage. The widget script must reference your UI page. The widget Name must be the name of the category in the Add content pop-up window. For Renderer type, select JavaScript. The following script can be added to the Script field if you want to create a new widget.
    function sections ( ) { 
       return { 'ServiceNow' : { 'type' : 'iFrameSNC' } }; 
      }
     
     function render ( ) { 
        var scope = gs.getCurrentScopeName();
        var type = renderer.getPreference('type');  
        return renderer.getRenderedPage(scope + type); 
     }
     
     function getEditLink ( ) { 
        var scope = gs.getCurrentScope();
        var type = renderer.getPreference('type');
       return "sys_ui_page.do?sysparm_query=name=render_gadget_" + scope + type; 
     }
  3. When the widget is saved, go to any homepage and add the new content.