--- title: "Widget Editor" url: "https://docs.4hse.com/guides/widget/widget-designer-intro" description: "Guide to using the editor to create and edit custom widgets in 4HSE." --- # Widget Editor The widget editor is a tool that allows you to create and modify widgets. A widget can be thought of as a small application—for example, a form for entering personal data, or a checklist to inspect a piece of equipment. A widget is made up of other widgets. Generally, we call the base widgets _components_, the building blocks available in the editor, but technically they are also widgets. By combining layout components, static components, and input components, we build our widget. The result is a tree of components/widgets nested within one another. ## Creating a New Widget [Section titled “Creating a New Widget”](#creating-a-new-widget) To create a new widget, we start from the file system. ![widget-designer-intro-img1](/_astro/widget-designer-intro-1.B86zMvlC_ZOlc9A.webp) By selecting **New widget**, a window opens allowing us to create and edit the widget. First, we must choose a base template. Currently, four templates are available: - Blank template: contains only a layout component (more on this later) - Vertical form: a template designed to easily create forms with input fields stacked vertically - Inline form: a template meant for organizing content horizontally - Form: an example template for building a checklist ## Editing a Widget [Section titled “Editing a Widget”](#editing-a-widget) Similarly, to edit an existing widget, start from the file system, select the widget (with `.hf` extension), then click the pencil icon in the toolbar or right-click the widget and choose **Edit**. ![widget-designer-intro-img2](/_astro/widget-designer-intro-2.ieqRj4mS_ZCGD2j.webp) This opens the editor directly with the selected widget, ready for editing. ## Editor [Section titled “Editor”](#editor) Whether you’re creating a new widget or editing an existing one, you’ll be working in the editor. The editor window contains several key areas: ### Components [Section titled “Components”](#components) The left panel lists all available components that can be added to your widget (more will be added in future updates). These include: - Labeled input: components with a label and an input field. Ideal for vertical forms. ![widget-designer-intro-img3](/_astro/widget-designer-intro-3.CnV0YJpw_1c3wkr.webp) - Basic input: plain input fields, useful for inline forms. ![widget-designer-intro-img4](/_astro/widget-designer-intro-4.hf3epWpD_Mxw2T.webp) - Static: non-interactive components like labels, titles, etc. - Layout: used to organize content visually (explained further below) - Snippets: reusable pieces of widgets ### Tree [Section titled “Tree”](#tree) Also in the left panel, under the “TREE” tab, you can view your widget’s structure. This is useful to understand the actual layout of the widget you’re editing. Selecting a node in the tree also highlights it in the center preview and in the properties panel on the right. Selecting components is necessary to edit, delete, or duplicate them. Sometimes components are tightly packed, so selecting them from the tree is easier. ### Preview – Center Panel [Section titled “Preview – Center Panel”](#preview--center-panel) The center of the editor displays a live preview of the widget. This graphical preview shows what the widget will look like in use. However, since this area is used for other tasks too, the preview may not be 100% accurate. Use the toolbar’s preview function for an exact result. Hovering over a component highlights it and shows its type. Clicking a component selects it, which also updates the tree and the properties panel on the right. Once selected, two icons appear: one to duplicate and one to delete the component. ### Properties [Section titled “Properties”](#properties) The properties panel is on the right. Each component has properties—for example, text size, margins, or an input’s default value. These are shown when the component is selected in the tree or preview. Changes made here will immediately reflect in the preview (you may need to click elsewhere, like the white space or another property, for them to apply). Each property can be enabled via its corresponding checkbox. If the checkbox is off, the component uses the default value. If it’s on, you can customize the property. This lets you tailor components to your needs. Different components have different sets of properties. ### Drag & Drop [Section titled “Drag & Drop”](#drag--drop) You can drag components in several ways: - From the **COMPONENTS** panel to the preview area to add new elements exactly where you want them. - Within the preview area to rearrange them. Holding the CTRL key during drag turns the cursor into a plus icon, meaning the component will be duplicated, not moved. ## Layouts [Section titled “Layouts”](#layouts) Let’s take a closer look at layout components. These are essential for organizing your content effectively. Using them correctly saves time and gives precise control over layout; using them incorrectly can lead to frustration. ### Inline Layout [Section titled “Inline Layout”](#inline-layout) This layout mimics word processor forms. Components are arranged side-by-side and wrap to the next line automatically when space runs out. ![widget-designer-intro-img5](/_astro/widget-designer-intro-5.C2mUfeHv_1Vgyp9.webp) Only certain components can be displayed this way. Others, like titles or labeled inputs, will automatically break to a new line. ### Horizontal Layout [Section titled “Horizontal Layout”](#horizontal-layout) This looks similar to the inline layout but offers more control. Components can be spaced evenly, centered, aligned to the right, etc. ![widget-designer-intro-img6](/_astro/widget-designer-intro-6.dKYeHL4K_W9iT9.webp) ### Vertical Layout [Section titled “Vertical Layout”](#vertical-layout) Components are stacked vertically. Ideal for simple forms or, when combined with horizontal layouts, for complex arrangements. ## Example: Rack Inspection Checklist [Section titled “Example: Rack Inspection Checklist”](#example-rack-inspection-checklist) Let’s create a checklist for inspecting storage racks. ![widget-designer-intro-img7](/_astro/widget-designer-intro-7.mzKzLztd_2o3oX6.webp) This form uses both vertical and horizontal layouts. We first set the toolbar option: _Device layout_: **A4** We started with a vertical layout and added a title. ![widget-designer-intro-img8](/_astro/widget-designer-intro-8.BdOnZPQD_ZWO9Tf.webp) Next, we added two _horizontal layouts_ and inserted _text boxes_ from the labeled input components. To align the _Inspection date_ and _Name_ fields, we set the label width to 120px. To right-align the _Rack No./Department_ and _Signature_ fields, we set the layout property _Spacing between items_ for both horizontal layouts. ![widget-designer-intro-img9](/_astro/widget-designer-intro-9.DJ9wf3Ma_Z1wBlqe.webp) We then added another _horizontal layout_ containing four _vertical layouts_. Each vertical layout contains a _title_ with a description: No., Items to check, etc. We configured the following: - Horizontal layout padding: 0 - Vertical layout widths: 10%, 50%, 14%, 14% - Disabled vertical layout height using the checkbox - Vertical layout borders: Solid, 1px - Title font size: 3 - Title font weight: Normal ![widget-designer-intro-img10](/_astro/widget-designer-intro-10.DEiAfElp_yMfnU.webp) We duplicated the horizontal layout. ![widget-designer-intro-img11](/_astro/widget-designer-intro-11.D_sLQhIP_Z2kFhfW.webp) In the new row, we removed titles from the last two columns and increased the font size of the remaining titles from 3 to 4. Thanks to disabling the “Height” property earlier, these now appear as empty cells that still fill the vertical space. We duplicated this row three more times. ![widget-designer-intro-img12](/_astro/widget-designer-intro-12.Dl0GJV6o_F8LzV.webp) We then updated the titles and adjusted row heights to achieve the final design. ![widget-designer-intro-img13](/_astro/widget-designer-intro-13.CAt9AVDb_GtQ1R.webp) This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.