Widget Palette

You can use the widget palette to keep widgets consistent across projects and team members. This page covers creating and importing libraries for the widget palette. For details about creating and editing widgets, see Component and Widget Essentials.

The widget palette is located at the bottom of the workspace. The widget palette contains all of the widget libraries that have been created in this project or that have been imported to this project from other projects. In other words, the palette contains everything that is stored in the palette and lib directories for this project.


The DGLux5 widget palette.


Video Tutorial: Adding and Removing Libraries

More video tutorials are here.


Create Your Own Widget Library

To build your own widget library:

  1. Open the .dg5 file that contains the widgets you want to use.
  2. Select File > Save As.
  3. Save the file in the palette directory. Give it the name that you want to appear in the widget palette.
  4. Refresh your browser.

    In the widget palette, the name of this file becomes a category under the name of the current project.

    Click a category to expand it and see its available widgets. If needed, use the scrollbar to see all available widgets and categories.


    The files named 1, 2, and 3 were saved to the palette directory and are categories in the widget palette.


Import a Widget Library

To import widget libraries from other projects:

  1. Select the lib directory in the Project panel.
  2. Right-click the lib directory, and select Import Library.

    A list of the other projects to which you have access appears.

  3. Select the project that contains the widgets you want. Select multiple projects by holding Ctrl on Windows or Command on Mac.
  4. Click Import.

    Each project appears as a folder in your lib directory and a category in your widget palette.


    The libraries for the DGBox, Dashboard, and HVAC projects were imported to the lib directory. The Dashboard library is selected in the palette. The Dashboard library includes the sub-categories Charts and Gauges.

Tip: Use Templates to Simplify Access to Widgets

When you save a project as a template, you can use the template to quickly access all of the relevant widget libraries without having to import or re-create them.


Edit Widgets

You edit a widget using its properties. For more information, see Component and Widget Essentials.

You can edit a widget in three different places, with different results:

Place where you edit the widget Places affected
The palette directory that owns the widget
  • This palette directory
  • All lib directories into which this widget’s .dg5 file has been imported
  • Therefore, all widget palettes that include this widget
A lib directory where the widget has been imported
  • This lib directory
  • Therefore, the widget palette in this project
Any other .dg5 file where an instance of the widget has been created using the widget palette
  • This instance only

Note

Symbols are the exception to this rule. If the widget is a symbol, and you have can edit access to the source file, then you can enter symbol editing mode to edit the source symbol. Changes made in symbol editing mode affect the source symbol and all instances of the symbol.

Tip

Sometimes, you might want to put a widget from another project into your widget palette, while also ensuring that the widget in your palette is unaffected by edits to the original widget. To achieve this effect:

  1. Make sure you have access to the project that owns the widget. You can ask the creator for access.
  2. Import a copy of the .dg5 file that contains the widget.
  3. Save the imported file in your palette directory.

Keep in mind that if you do this, your file is not in sync with the source file, and you will not receive any updates to this file.


Set Widget Palette Icon

If a widget is a symbol, you can set the icon that represents the widget in any widget palette panel. To set the icon:

  1. Open the palette directory in the project that owns the widget.
  2. Make sure that the widget is a symbol.
  3. Make sure that the icon is uploaded to the project.
  4. With the symbol selected, in the Advanced Properties panel, set the paletteIcon property as the path to the icon.

More Resources