# Custom widgets With *Custom Widgets* you can create your own widgets tailored exactly to your needs. The advantage over preconfigured widgets is that in Custom Widgets ## Basic principle A Custom Widget consists of several modules. You can combine as many of these modules as you like into one widget. You can further customize the individual modules in detail. In Fig. 1 you can see an example of a Custom Widget consisting of the following modules (from top to bottom): * Analog Trend * Heatmap * Donut

Fig. 1: A preview of a Custom Widget with 3 modules

## Step by step: Creating a Custom Widget ### Step 1 – Creating a Custom Widget Follow the steps to create an "empty" Custom Widget. 1. Make sure you are in the "Dashboards" menu item 2. Click on "Widgets" in the context bar\ ▷ The widget selection opens 3. Click on Custom Widget 4. Enter a name 5. Select an icon. This icon will later appear in the widget title bar 6. Click on "Confirm"\ ▷ The new widget has been created ### Step 2 – Customize the new widget After the widget has been created in step 1, you can make the first adjustments.


[A]	Back/Cancel	Return to the widget overview, without saving.
[B]	Name	You can adjust the name here afterward
[C]	Icon	You can adjust the icon here afterward
[D]	Save	Save entries
[E]	Preview	A preview of what the created widget will look like
[F]	Add module	Click here to add modules to the widget
[G]	Set test data	Click here to set test data. Explained in more detail under -> Set test data
[H]	Alarm data	If this box is checked, the widget will display the alarms of the asset defined under "Primary Asset". The "Primary Asset" is specified when you have finished configuring the Custom Widget and add it to the dashboard. See X

### Step 3 – Add a module

1. Click on **\[F]**, to add the first module to the new widget. \ ▷ The module selection (Fig. 3) appears 2. Move the mouse over a module to display a short description 3. Click on a module to add it to the Custom Widget\ ▷ The **Preview** **\[E]** of the widget is updated with the new module.\ ▷ The **Module options \[I]** (Fig. 4) open 4. Configure the module in the **Module options \[I]** 5. Click the button **Save** **\[J]**, to save the module settings or click **\[K]**, to cancel. {% hint style="info" %} A detailed explanation of the configuration options for each module can be found in the chapter [-> Modules](https://docs.buildings.ability.abb/collection/english-v14/documentation/widgets/custom-widgets/modules) {% endhint %}

{% hint style="warning" %} Click **NOT** the upper Save button \[D] (see image 1)! \ \ Make sure to click the button **\[J]** for the respective module. Otherwise, the changes made to the module will be lost. {% endhint %} ### Step 4 – Add and arrange further modules 1. Click on **\[F]**\ ▷ The module selection (Image 3) opens. 2. Click on the module you want to add to the widget 3. Proceed as explained in step 3 to configure the new module. ## Rearrange modules You can arrange modules within the Custom Widget as you like. 1. Click in the **Preview \[E]** on a module. \ ▷ The module is outlined in black 2. Click on **\[L]**\ ▷ The module is moved up 3. Click on **\[M]**\ ▷ The module is moved down ## Delete modules You can delete a module from the Custom Widget. 1. Click in the **Preview \[E]** on a module. \ ▷ The module is outlined in black 2. Click on **\[N]**\ ▷ The module is deleted ## Set test data You can simulate what your new Custom Widget will look like when it has been filled with data. Use the function **Set test data** **\[G]** 1. Make sure you are in the "Dashboards" menu item 2. Click on "Widgets" in the context bar\ ▷ The widget selection opens 3. Click on the Custom Widget for which you want to set test data 4. Click on **Set test data** **\[G]**\ ▷ The "Test data" window appears (Fig. 5) 5. Make the desired settings 6. Click on **Continue \[S]**\ ▷ You will see the simulated data in the **Preview** **\[E]** {% hint style="info" %} The simulated data only affects the preview of the Custom Widget. The simulated data is only intended to provide a better overview of what a finished Custom Widget will look like. The simulated data has no effect on the Custom Widget after it has been created and saved. {% endhint %}


[O]	asset	Simulates the display of the title of the Primary Asset in the Title bar [T] (Fig. 6)
[P]	Alarm	Simulates the alarm level in the widget icon [U] or the Title bar [T] (Fig. 6) Available values: 0: No alarm 1: High alarm level / title bar [T] turns red 2: Medium alarm level / Yellow symbol in the widget icon [U] 3: Low alarm level / Green symbol in the widget icon [U]
[Q]	Time period	Only effective for certain modules, e.g. trends. Changes the scaling of trends; the same effect is caused when [V] is pressed.
[R]	Number of assets	Only effective for certain modules, e.g. donuts. Simulates how the module changes when more assets are linked to it
[S]	Continue	Apply entries and close the "Test data" window

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buildings.ability.abb/collection/english-v14/documentation/widgets/custom-widgets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.