# Creating Widgets through Scripting

**URL:** <https://forum.inductiveautomation.com/t/creating-widgets-through-scripting/62794>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 8, 2022, 7:05pm UTC](https://forum.inductiveautomation.com/t/creating-widgets-through-scripting/62794 "2022-08-08T19:05:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![agriner](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@agriner](https://forum.inductiveautomation.com/u/agriner)\
**Post date:** [August 8, 2022, 7:05pm UTC](https://forum.inductiveautomation.com/t/creating-widgets-through-scripting/62794/1 "2022-08-08T19:05:20Z")

</div>

I’m working with a dashboard in perspective. I’d like to be able to add new widgets through scripting. I’m not exactly sure how to create new widget instances through.  
My end goal is to be able to load a dashboard’s configuration from a database based on a button press but I’m stuck on the creating widgets from scripting part.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 8, 2022, 7:19pm UTC](https://forum.inductiveautomation.com/t/creating-widgets-through-scripting/62794/2 "2022-08-08T19:19:25Z")

</div>

Start by using Designer.

- Create a view - if you haven’t already - to use as a widget.
- Add it to `props.availableWidgets.0` and give `props.availableWidgets.0.name` a value. (e.g. ‘CheckBox’.)
- Run the designer, click the pencil semi-circle at the bottom and add a couple of instances of your widget.
- Right click on `props.widgets` and copy the JSON.
- Paste it into your favourite text editor and you should see something like,

> **props.widgets JSON**
>
> ```auto
> [
> {
> "name": "CheckBox",
> "viewPath": "coordChkBox",
> "viewParams": {},
> "isConfigurable": true,
> "header": {
> "enabled": true,
> "title": "",
> "style": {
> "classes": ""
> }
> },
> "body": {
> "style": {
> "classes": ""
> }
> },
> "minSize": {
> "columnSpan": 1,
> "rowSpan": 1
> },
> "position": {
> "rowStart": 3,
> "rowEnd": 6,
> "columnStart": 4,
> "columnEnd": 7
> },
> "style": {
> "classes": ""
> }
> },
> {
> "name": "CheckBox",
> "viewPath": "coordChkBox",
> "viewParams": {},
> "isConfigurable": true,
> "header": {
> "enabled": true,
> "title": "",
> "style": {
> "classes": ""
> }
> },
> "body": {
> "style": {
> "classes": ""
> }
> },
> "minSize": {
> "columnSpan": 1,
> "rowSpan": 1
> },
> "position": {
> "rowStart": 2,
> "rowEnd": 4,
> "columnStart": 1,
> "columnEnd": 3
> },
> "style": {
> "classes": ""
> }
> }
> ]
> 
> ```

Now you just have to script the creation of that!

---

<div class="post-metadata">

**Author:** ![agriner](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@agriner](https://forum.inductiveautomation.com/u/agriner)\
**Post date:** [August 8, 2022, 8:22pm UTC](https://forum.inductiveautomation.com/t/creating-widgets-through-scripting/62794/3 "2022-08-08T20:22:46Z")

</div>

I had no idea you could alter configs that way. Thanks so much for your help!