Widgets

Widgets are components that appear in the Deco Admin form, corresponding to the properties of a Block. Here is a list of the existing widgets:

TextArea

Exemplo textarea

This widget is rendered for text fields using the JSDoc Annotation with the special formatting @format textarea. Example:

export interface Props {
  /**
   * @format textarea
   */
  context: string;
}

CheckBox

Exemplo checkbox

This widget is rendered for boolean fields. Example:

export interface Props {
  showTopbar: boolean;
}

ImageUri

Exemplo image

This widget is rendered for fields of type ImageWidget. This type can be imported from deco-cx/apps. Example:

import { ImageWidget as Image } from "apps/admin/widgets.ts"

export interface Props {
    image: Image;
}

VideoUri

Exemplo video

This widget is rendered for fields of type VideoWidget. This type can be imported from deco-cx/apps. Example:

import { VideoWidget as Video } from "apps/admin/widgets.ts"

export interface Props {
    video: Video;
}

Section

Exemplo section

The Section widget is used to create Sections that can receive other Sections as properties. It works similarly to receiving other components via props. When using this field, you can select any Section from your project. The form rendered in this widget takes the form of the same form that would be rendered for the selected Section. This widget is rendered for fields of type Section. This type can be imported from deco-cx/apps. Example:

import { Section } from "deco/blocks/section.ts";

export interface Props {
    innerSection: Section;
}

Select

Exemplo select

The Select widget is used to create dropdown lists or option menus, allowing users to choose between different alternatives. This widget is rendered for fields whose type is a Union in Typescript. Example:

export interface Props {
    layout: "Grid" | "Table" | "List";
}

HTML

Exemplo html

The HTML widget is rendered for fields of type HTMLWidget. This widget allows editing the content of its field through a WYSIWYG (What You See Is What You Get) Editor. This type can be imported from deco-cx/apps. Example:

import { HTMLWidget as HTML } from "apps/admin/widgets.ts"

export interface Props {
    content: HTML;
}

Secret

Exemplo secret

The Secret widget is intended for sensitive fields, such as passwords, and ensures that the content is encrypted to protect confidential information. It is rendered for fields of type Secret. This type can be imported from deco-cx/apps. Example:

import { Secret } from "apps/website/loaders/secret.ts";

export interface Props {
    password: Secret;
}

Dynamic Options

This widget is especially useful when the options available in a field depend on dynamic data. It displays the same as the Select, but its options can be loaded dynamically via a loader!

Example:

MySection.tsx

export interface Props {
  /**
   * @format dynamic-options
   * @options deco-sites/mystore/loaders/products.ts
   */
  product: string;
}

mystore/loaders/produtos.ts

import { FnContext, allowCorsFor } from "deco/mod.ts";

export default function ProductsLoader(_props: unknown, req: Request, ctx: FnContext) {
    // Allow Cors
    Object.entries(allowCorsFor(req)).map(([name, value]) => {
        ctx.response.headers.set(name, value);
    });

    return ["Product X", "Product Y", "Product Z"];
}