{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2979,"path":"application-development/widget-editor.md","title":"Widget editor","bundle":null,"doc_type":null,"release":"australia","body":"\n# Widget editor\n\nThe widget editor is a three-panel workspace for building and previewing a widget. It has a code editor for the component and server script, a live preview, and a panel for widget properties.\n\n## Component and Script tabs\n\nBoth tabs are code editors with syntax highlighting and autocomplete for the widget component code and its server script. The server script is written as `export default function server(data, options, input) {...}`, with `GlideRecordSecure`, `GlideQuery`, and `gs` available — use `GlideRecordSecure` rather than `GlideRecord` so queries respect ACLs. Call `this.server.get(input)`, `.update()`, or `.refresh()` from the component to run it.\n\n\\[Omitted image \"aiux-builder-editor-overview.png\"\\] Alt text: Component tab with syntax highlighting and autocomplete\n\n## Complex widgets with additional files\n\nWidget Builder only edits the widget's component \\(`index.js`\\) and server script \\(`server.js`\\). A complex widget that has relative imports to other utility files isn't fully editable here, those additional files aren't shown in the **Component** or **Script** tabs.\n\n**Important:** If a widget imports from files other than its own component and server script, use the [Lux Lab VS Code extension](https://marketplace.visualstudio.com/items?itemName=ServiceNow.now-vscode-extension-ainpx-lab) instead.\n\n\\[Omitted image \"aiux-builder-complex-widget-vscode.png\"\\] Alt text: Complex widget with additional utility files, opened in the Lux Lab VS Code extension\n\n## Preview tab\n\nThe **Preview** tab renders the widget live, in a resizable and zoomable viewport:\n\n-   Drag the handles on the left, right, bottom, or corner to resize the preview.\n-   Use the zoom controls in the bottom-right corner, or hold Ctrl/Cmd and scroll, to zoom in and out. The zoom controls reflow the layout rather than just scaling it visually.\n-   Select **Refresh** to reload the preview from the latest build, bypassing the short cache Widget Builder keeps when you switch tabs.\n\nIf the preview can't load, it shows the specific problem, such as a missing dependency, a timeout, an import failure, or a registration error with a **Retry** button. A widget that hasn't been built yet shows \"Preview not available yet — Click Build to compile\" instead of an error.\n\n\\[Omitted image \"aiux-builder-preview.png\"\\] Alt text: Preview tab with resize handles and zoom controls\n\n## Property panel\n\nThe property panel on the right has two modes:\n\n-   **__Widget Properties__**\n\n    A form for the widget's metadata: name, ID, description, category, and similar fields.\n\n-   **__Preview Props__**\n\n    Inject property values into the running preview to see how the widget behaves with different inputs, without changing the widget's saved defaults.\n\n\n\\[Omitted image \"aiux-builder-property-panel.png\"\\] Alt text: Property panel in Widget Properties mode\n\n\\[Omitted image \"aiux-builder-preview-props.png\"\\] Alt text: Property panel in Preview Props mode\n\n## Save, Publish, and Build\n\n-   **__Save__**\n\n    Builds the widget without deploying it. The preview updates right away, so you can iterate quickly. If a build fails, your edits aren't lost — Widget Builder saves a draft and shows the build error. Fix the issue and save or publish again.\n\n-   **__Publish__**\n\n    Builds and deploys the widget to the instance. A new or cloned widget's first publish shows \"Widget created and published\"; later publishes show \"Widget published\". If publishing fails after a successful build, Widget Builder shows the error.\n\n\n"}}