# Custom widgets: feature walkthrough **URL:** \ **Category:** HABPanel\ **Tags:** widget\ **Created:** [November 14, 2016, 1:28am UTC](https://community.openhab.org/t/custom-widgets-feature-walkthrough/16670 "2016-11-14T01:28:48Z")\ **Posts on this page:** 1\ **Showing post:** 1
**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\ **Post date:** [November 14, 2016, 1:28am UTC](https://community.openhab.org/t/custom-widgets-feature-walkthrough/16670/1 "2016-11-14T01:28:49Z")
Hi everyone, This post introduces a new HABPanel feature: **custom widgets!** They are based on the template widget - which isn’t going away - but improves it by offering a central space for widgets that are designed to be reused, shared, and configured. Therefore, if you have multiple widgets of the same type on your dashboards, you can now use a centrally-managed template with configurable settings. This is better for several reasons: technical (no wasteful duplication of template code) and practical (modifications to the template impacts all widgets automatically). * * * **UPDATE: HABPanel now has a [widget gallery](https://community.openhab.org/t/habpanel-widget-gallery/34691) and uses the _widgetgallery_ tag, if you share a widget make sure to attach this tag to your topic as well as the _widget_ tag. The info below is still applicable until the next openHAB stable release.** A quick side note first: the new custom widget list has a link to a filtered view of the posts on this forum having the _widget_ tag. ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/2/24ae17ef48d7349892d85aeb71b9591a456f2e64.png) It would be great if this tag could act as a gallery of widget contributions to download - if you have a new widget to share, I’d suggest opening a new topic with this tag, presenting your work with screenshots, configuration, requirements etc. and attaching the .json file exported from HABPanel. Please stay on-topic when commenting on these as well. * * * ## Adding and designing new widgets ### The widget list You can access the registry of custom widgets either via a dashboard editing screen, or in the advanced settings: ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/0/0b4dd2f1224fea4de86fcabbea47344a09c9d28d.png) ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/6/67cf68e0058e7260affd1af48d0673688975955f.png) You can create a new widget from scratch, or import one if you have an existing .json file previously exported by you or downloaded from the community. A new tile will be added; widgets may also be exported or deleted from this screen using their context menu: ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/1/1a14db55d1f691f3c7b4866e92330e6779111a5e.png) Clicking on the tile itself brings you to the new widget designing experience: ### The widget designer #### Designing the template Here you can edit your template with a more comfortable, bigger editor. ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/9/9287601f8bdb66e1c095292bb598f786c370a90e.png) #### Defining the configuration settings Can you see the variables in the code above: `config.artist_item`, `config.track_item`, `config.artist_text_size` etc? They are defined in the _Settings_ tab (along with general settings, like a display name): ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/b/bd9be200246441175ef807df9871ca9da971c1fc.png) You can add several types of configuration settings, currently: - String - Number - (openHAB) Item - Color Make sure you give them a proper ID, which will be your variable name in the template (prefixed by “`config.`” as seen above), and a label. ### Previewing the widget You can switch to the _Preview_ tab at any time to see your new widget in action. ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/6/6745a3035477237ca0be340fee0ce02362b14aa2.png) Resize it with the sliders or the chevron if necessary. If you’re using configuration settings, you’ll probably want to click on the gears icon on the top-left corner to bring up the settings dialog for the preview widget: ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/0/0b0d6afb07058c549ec8f37d3c8cb0ded195514c.png) Every configuration setting is displayed depending on its type. After you’ve configured the settings, the preview will update to reflect them. ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/3/3d757e99760beed5ce16b9b0ac1905f96136ada6.png) **Once you’re satisfied with your widget, don’t forget to save it with the button in the top-right corner!** **(tip: ctrl+S works in the template editor)** ## Reusing a widget Your new widget will simply become available in the _Add Widget_ dropdown of the dashboard designer. It will also be labeled with the widget’s ID, and have the same settings dialog box as the preview above. ![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/5/5f7c3a619b84391b86727c48804ae0c3dd8adfc2.png) ## Feedback welcome! That’s it for now - let me know what you think and if you experience some issues. 🙂 --- _[View the full topic](https://community.openhab.org/t/custom-widgets-feature-walkthrough/16670)._