This KB Article explains how to use the most common Miscellaneous widgets in a dashboard.


AppBase Page - SF MTA Parking Data Page

  1. Navigate to SetupForms and Pages (1)
  2. Goto Dashboards (2) and open the dashboard to edit it.
  3. Click on the Add Widget button.
  4. Under the Miscellaneous category, select the AppBase Page widget and click the Add Widget button.
  5. Click the Gear button to configure the widget.
  6. Insert a Name for the widget and select the Page code from the dropdown list (3). In this demo, we are selecting the sample AppBase page SMPL_OfficerDashboard.
  7. Save the widget configuration.
  8. Refresh the dashboard if you don't see the page.

These pages are built in ASPX and uploaded to the Solution Resources. Navigate to Application Studio → <<solution>> → Resources → Solution Resources, you could find the SMPL_OfficerDashboard page under the folder SolutionSysFiles/SMPL/Pages.

Coded Page - using an external JavaScript

You can embed custom widgets into a dashboard. We will show a simulation of the solar system based on the https://sim4edu.com example.

var mainPanel = Ext.create('Ext.panel.Panel', {
    layout: 'center',
    html: '<div id="coindesk-widget" data-size="mpu" style="display: table; margin: 0 auto;"></div>',
    bodyStyle: 'background-color: #353536;',
    listeners: {
        render: function(){
            Ext.Loader.loadScript('//widget.coindesk.com/bpiticker/coindesk-widget.min.js');
        }
    }
});
 
/*RETURN VIEW TO LAUNCH*/
return mainPanel;
JS

Create a new Coded Page

  1. Navigate to Setup (1) → Forms and Pages (2)
  2. Goto Coded Pages (3) and add a new coded page by clicking on the plus button (4)
  3. Paste the above code (5) and Save & Close (6).

Add a New Widget to the Dashboard

  1. Goto Dashboards (3)
  2. Open the dashboard where you want to add the new widget.
  3. Click the Add Widget button (2)
  4. Under the Miscellaneous category, select the Coded Page widget and click the Add Widget button (3).
  5. Configure the new Widget by clicking the Gear button
  6. Add a Name to the widget
  7. Select the Coded Page from the dropdown list
  8. Save the widget configuration.
  9. Refresh the dashboard if you don't see the content.

URL - Embedding in iFrame

  1. Navigate to SetupForms and Pages (1)
  2. Goto Dashboards (2) and open the dashboard to edit it.
  3. Click on the Add Widget button.
  4. Under the Miscellaneous category, select the URL widget and click the Add Widget button.
  5. Click the Gear button to configure the widget.
  6. Insert a Name for the widget and insert the full address in the URL field. In this demo, we are using the URL of a simulation of the Solar System https://sim4edu.com/sims/15/CSS-3D-Solar-System.
  7. Save the widget configuration.
  8. Refresh the dashboard if you don't see the page.