Components:Prefabs - bettyblocks/cli GitHub Wiki

A Prefab is something you can drag onto the canvas inside the Page Builder. Prefabs appear in the sidebar of the Page Builder. The following screenshot shows four Prefabs in the category NAVIGATION in the sidebar of the Page Builder.

A Prefab is configured by a function returning a JavaScript object with predefined keys.

Type

type Prefab = () => PrefabStructure;

interface PrefabStructure {
  category: string;
  icon: string;
  name: string;
  structure: ComponentConfiguration[];
}

Example

This example configures a heading Prefab containing a single Heading Component:

(function Prefab() {
  return {
    name: "Hello World",
    icon: "TitleIcon",
    category: "CONTENT",
    structure: [
      {
        name: "Heading",
        options: [
          {
            label: "Heading text",
            key: "text",
            value: "Hello World",
            type: "TEXT"
          }
        ],
        descendants: []
      }
    ]
  };
})();

Keys

The following keys are required:

name

The name of the Prefab in the Page Builder sidebar.

In the following screenshot, the Prefab names have been marked Betty red.

The name has type string.

icon

The icon in the Page Builder sidebar next to the Prefab name.

In the following screenshot, the Prefab icons have been given a Betty red background.

The icon has the following type:

type Icon =
  | "AccordionIcon"
  | "AccordionItemIcon"
  | "AlertIcon"
  | "AutoCompleteIcon"
  | "BreadcrumbIcon"
  | "BreadcrumbItemIcon"
  | "ButtonGroupIcon"
  | "ButtonIcon"
  | "CheckboxIcon"
  | "Column2Icon"
  | "Column3Icon"
  | "ColumnIcon"
  | "ContainerIcon"
  | "CreateFormIcon"
  | "DataContainer"
  | "DataTable"
  | "DataTableBody"
  | "DataTableColumn"
  | "DataTableHead"
  | "DataTableRow"
  | "DatePickerIcon"
  | "DateTimePickerIcon"
  | "DefinitionListIcon"
  | "DynamicFormIcon"
  | "DynamicTableIcon"
  | "DynamicTilesIcon"
  | "EmailInputIcon"
  | "FileInputIcon"
  | "FormIcon"
  | "GridIcon"
  | "HiddenInputIcon"
  | "HorizontalRuleIcon"
  | "HtmlIcon"
  | "IbanInputIcon"
  | "IconIcon"
  | "ImageIcon"
  | "ImageInputIcon"
  | "IncludeIcon"
  | "LabelIcon"
  | "Layout1Icon"
  | "Layout2Icon"
  | "Layout363Icon"
  | "Layout444Icon"
  | "Layout48Icon"
  | "Layout66Icon"
  | "Layout3333Icon"
  | "Layout84Icon"
  | "ListItemIcon"
  | "LoginFormIcon"
  | "MultiLineIcon"
  | "MultiSelectIcon"
  | "NavbarIcon"
  | "NavItemIcon"
  | "NavSidebarIcon"
  | "NumberInputIcon"
  | "OrderedListIcon"
  | "PanelIcon"
  | "ParagraphIcon"
  | "PasswordInputIcon"
  | "PhoneInputIcon"
  | "PriceInputIcon"
  | "ProgressBarIcon"
  | "RadioButtonIcon"
  | "RowIcon"
  | "RowColumnIcon"
  | "SelectIcon"
  | "SubmitButtonIcon"
  | "TabGroupIcon"
  | "Table"
  | "TextareaIcon"
  | "TextInputIcon"
  | "TimePickerIcon"
  | "TitleIcon"
  | "UnorderedListIcon"
  | "UpdateFormIcon"
  | "UrlInputIcon";

category

The category among which the Prefab will appear in the Page Builder sidebar.

The order of the first 6 categories cannot be changed. Custom categories are ordered alphabetically:

1. LAYOUT
2. CONTENT
3. DATA
4. TABLE
5. NAVIGATION
6. FORM
7. ... Custom categories

In the following screenshot the category has been marked Betty red.

The category has the following type:

type Category =
  CustomCategory
  | DefaultCategory

type CustomCategory = string;

type DefaultCategory =
  "LAYOUT"
  | "CONTENT"
  | "DATA"
  | "TABLE"
  | "NAVIGATION"
  | "FORM";

beforeCreate

A React component which will be rendered in a pop-up when the user drags the prefab on the canvas.

Use this feature to guide your user when he/she is using your prefab. Maybe your prefab works best when certain options are filled in? Make sure to let the user set those options in the pop-up! For example, a data table is of no use when it doesn't display any data. Let the user select the data to show in the data table before it is dropped on the canvas!

Go to this page for more info on how to use it.

structure

An array of Component Configurations for the Components in the Prefab. Read more about Component Configurations in the next section.

The structure has type ComponentConfiguration[].

Read more about ComponentConfiguration.

References

With references we can link entities in a prefab in a readable manner. References are used when one entity has a dependency on another entity. For example, we can create a variable that is linked to an action.

How references work

In this example, we have one action that has a ref-object. Before the prefab is send to the backend, all the keys inside the ref-object will be converted to an UUID and will move to the parent object. For example:

ref: {
  id: '#actionId',
  endpointId: '#endpointId',
}

will be replaced with:

id: '35044618145647a6a6ae8cadb27c772b',
endpointId: '65b2461514a647a6a6ae8cad92767123'

Note that the object ref does not exist anymore.

An array of references is also possible:

ref: {
  path: ['#ref1', '#ref2']
}

Which results in:

path: ['a321141814ab47a6a6ae8cccb21c77cc', '12b246abc4a647a6a6698cad92764444']

References used with entities:

actions: [
  {
    name: 'Create form action',
    ref: {
      id: '#actionId',                  // *1
      endpointId: '#endpointId'         // *2
    },
    useNewRuntime: false,
  },
],

To link this action to a component option, of type ACTION, we can use the same ref as we did in the example above: #actionId.

structure: [
  {
    name: 'Button',
    options: [
      {
        key: 'actionId',
        type: 'ACTION',
        ref: {
          value: '#actionId',          // *1
        },
      },
    ]
  }
]

*1 : As you can see, the action component option is now linked to the action inside the actions entity by the #actionId ref. They will both use the same uuid, so they are connected.

*2 : The action is linked to an endpoint through the endpointId ref.