Dashboard Widgets

The Dashboard Widgets extension is a type of extension that lets you create widgets for your stack dashboard. 

Using this extension, you can create several useful widgets, such as a widget that shows real-time data of stack usage, or lists all the entries published recently, or one that allows you to add your 'To-Dos' or for the day or take notes.

How t0 create Dashboard Widgethe Group Field Works.png

Let's learn how to add a new Dashboard Widget extension for your stack.

Create New Dashboard Widgets

In this guide, we will learn how to build a new custom widget from the ground up.

We have step-by-step custom widget setup guides for some popular third-party apps. The details can be found in the corresponding articles given in the list below. Or you can refer to our general guide below on creating a custom widget.

Guide for Specific Dashboard Widgets

General Guide on Creating Dashboard Widgets

Let’s look at the steps involved in creating and deploying a dashboard widget for your stack.

  1. Go to Settings and click on Extensions.
  2. Click + Add Extension and select Create new.
    Create new.png
  3. On the Select Extension Type screen, select Dashboard Widget.
    Select extension type.png
  4. On the Create New Dashboard Widget page, enter values in the fields as given below:
    • Title: Provide a suitable title for your custom widget. This title will be visible as a widget name on the main dashboard page.
    • Default width: You can choose the width of the custom dashboard widget. Choose between 'Half Width' and 'Full Width' as per your requirement.

      Note: The height is configurable through the Extensions SDK. You can also define if the user can toggle between ‘Half Width’ and ‘Full Width’ in the SDK.

    • Hosting method: Select how you wish to host the widget. If you select 'External Hosting', you need to provide the URL on which you have hosted the widget, in the External hosting URL field that appears below.
      If you select 'Hosted by Contentstack', you can write the code in the 'Extension source code' that appears below after selecting this method.
    • Extension source code: Enter your custom widget's source code. You can find an example here.
    • Config Parameter: If you have used any config parameters (such as access token) in the source code, specify the value of the parameters in the 'Config Parameter' field. Config parameter.png
    • Enable dashboard widget: Enabling this option will make the Dashboard Widget enable for all users of the stack on the main Dashboard page.

      Note: Using the Settings icon on the Dashboard page, the users can show or hide the widget on their Dashboard.

  5. Click on Save to save your settings.

Once your custom dashboard widget is created, you will be able to use it from the main dashboard page for your stack.

Limitations

  • The maximum size of the extension code cannot exceed 500KB.
  • The maximum character length for the Title field is 256.
  • The maximum number of extensions allowed per stack is 50.
  • The maximum size of the extension’s configuration parameters cannot exceed 10KB.
  • The height of the dashboard extension widget can be altered when it is in the full-screen mode. It can vary from the default dashboard widget height to the browser window's height only.
Was this article helpful?
top-arrow