Jadu Dashboard: Create a Dashboard Homepage

Reminder: It's best practice to build your homepage in the Test environment first. Although homepages and filters will need to be recreated in the Production environment, working in Test allows you to build and test changes without impacting your end users.

Building a Homepage

Step 1: Create a new Homepage

  1. In the Jadu Central Control Center, click on Publishing in the left side navigation bar, then select Homepages.
    Jadu Central control center, Publishing expanded. Homepages highlighted.
  2. Select New Homepage.
  3. In the Assign Properties pop-up modal, assign the following settings:
    Jadu Homepages Assign Properties pop-up settings as described above.
    • Title: Enter a meaningful name to appear at the top of your homepage. (This will be visible to users, so it should focus on user experience and describe the purpose of the homepage.)
    • Description: Enter any applicable internal notes (e.g., what audience or purpose this page serves). (This is not visible to users.)
    • Independent page: Select Yes - standalone landing page.
      • Note: This prevents the homepage from being added to category navigation, which is not in use with UMN Homepages.
    • Visible: Select No.
      • Note: Not in use by UMN.
    • Page structure: Select One column.
      • Note: This controls the display of a side navbar, which is not in use with UMN Homepages. Multiple columns can be created within the homepage designer. 
    • Friendly URL: Leave blank.
      • Note: Not in use by UMN - a Z Link can be used later for sharing a link to the homepage if desired.
    • Assign categories: Assign your category as you would when creating a new form. Be sure to select 'Apply' to register the selected category.
    • Assign metadata: Add a required description to the metadata as you would when creating a new form. WARNING: metadata fields are not private and should not contain any sensitive information
    • Assign stylesheet: Leave selection on the default stylesheet - Umnstandard.css.

Note: Some properties must be set according to these guidelines to ensure proper functionality.

  1. Select Done.

You will then be taken to a visual drag-and-drop style page builder with a selection of widgets available to use.

Step 2: Add Widgets to your Homepage

Follow the steps below to set up a basic dashboard. Widgets can be moved around/dragged & dropped to meet your individual design requirements.

  1. Add the Sign-in Button widget to your homepage by clicking and dragging it from the Widgets area into the row
    1.  Or, by using the Add button from the widget placeholder in the left-hand navigation.
      • Note: You do not need to configure any settings under Widget Details.
        Homepage Designer, Drag ad drop Sign-in Button highlighted, arrow pointing to row 1.
  2. Add a new row by clicking the Add row button under the widget preview area.
    Jadu Dashboard page, add row highlighted.
  3. Add the UMN Case List widget to your homepage.
    • Note: You will configure the settings for this widget in the next article.
  4. (Optional) Use any additional widgets or layout options to design a page that suits your needs.

Step 3: Save the Homepage

  1. Select the Save button to ensure changes are not lost.
  • Important: Unsaved changes will be lost if you navigate away or your session times out.

Homepage Layout Tips

Adding rows and widgets

  • New rows are added by clicking the Add row button under the widget preview area.
  • Widgets are added to a row by either dragging the placeholders in the Widgets area onto the row, or by using the Add button from the widget placeholder in the left-hand navigation.

Adjusting widget width

  1. Click on the widget to make it "active". A blue bar will show along the left edge of the widget.
  2. Click the Double headed arrow icon in the blue bar. The Widget width control will show below the row heading.
    Jadu Widget, width control highlighted
  3. Use the slider control or the percentage field to adjust the width of the widget
    Jadu Dashboard Widget width slider
  4. Click the Done button to save your changes.

Combining Widgets

The Combine Widget functionality allows you to display widgets vertically within a single row, reducing padding between the widgets and applying the same width setting.

  1. Click the Pencil icon next to the widget's title in the homepage preview area. The Widget details panel will open.
  2. Click the Settings tab, if provided.
  3. Select a widget to add to the column from the Combine Widget dropdown and click the Add button. The panel will close, and the widget will be added to the preview area.
    Jadu Dashboard combined widgets preview

Editing widget settings

  • To adjust a widget's settings, click the Pencil icon next to the widget's title in the homepage preview area.
    Jadu Dashboard widget Edit icon highlighted
  • Depending on the widget you have selected, the Widget Details window will display two tabs at the top of the window named Content and Settings (not all widgets will have these two options).
  • Note: Once you have saved your changes, you will need to publish/republish the homepage in order for the changes to appear in the live homepage.

Accounting for widget visibility

Some widgets change visibility depending on whether the user is logged in or not. If you create a multi-column layout with a widget that is currently hidden, any remaining visible widget(s) will expand to fill the empty space. It's important to check the appearance of your page in both states.

Related Articles:

Jadu Dashboard: Understanding Homepages

Jadu Dashboard: Configure the UMN Case List Widget

Jadu Dashboard: Publish a Homepage

Last modified

TDX ID

8033