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

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

## Step-by-Step: Create a Custom Widget ### Step 1 – Create a Custom Widget Follow these steps to create an "empty" Custom Widget. 1. Make sure you are in the "Dashboards" menu item 2. In the context bar, click on "Widgets" ▷ The widget selection opens 3. Click on Custom Widget 4. Enter a name 5. Select an icon. This icon will later appear in the title bar of the widget 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 inputs.
[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 alarms of the asset that was defined under "Primary Asset" will be displayed in the widget. 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 on the **Save** button **\[J]** to save the settings of the module or click on **\[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/platform/live-cockpit/widgets/custom-widgets/modules) {% endhint %}

{% hint style="warning" %} **DO NOT** click on the upper Save button \[D] (see Fig. 1)! Make sure you click on the button **\[J]** for the respective module. Otherwise, the settings you made for the module will be lost. {% endhint %} ### Step 4 – Add and Arrange More Modules 1. Click on **\[F]** ▷ The module selection (Fig. 3) opens. 2. Click on the module that 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. In the **preview \[E]**, click on a module. ▷ The module is bordered 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. In the **preview \[E]**, click on a module. ▷ The module is bordered 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. To do this, use the **Set test data** function **\[G]** 1. Make sure you are in the "Dashboards" menu item 2. In the context bar, click on "Widgets" ▷ 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 for a better overview of what a finished Custom Widget will look like. The simulated data has no influence 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 span	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 inputs and close the "Test Data" window