SourceFlow Page Builder

https://docs.google.com/document/d/1dy2p-A3uR9BTs7rKlz3bPCe9i0qZJ5B-l569OklivtA
Admin
SourceFlow Page Builder is a CLI-based tool for creating and managing reusable page components with...
Tokens:3,066
Snippets:12
Trust Score:5
Update:10 months ago
Show doc for...
Tokens:
Raw
### JavaScript Full Example Definitions File for SourceFlow Page Builder

Source: https://docs.google.com/document/d/1dy2p-A3uR9BTs7rKlz3bPCe9i0qZJ5B-l569OklivtA/edit_tab=t.0_bookmark=kix.1hrrfr19lnic

Provides a comprehensive example of a definitions.sourceflow.mjs file, demonstrating various component properties like strings, formatted text, selection options, repeaters, files, modules, and nested templates. This structure is essential for configuring custom components within the SourceFlow Page Builder.

```javascript
export default {
  component: 'ExampleComponent',
  label: 'Example Component',
  component_category: 'default',
  propSchema: [
    {
      name: 'title',
      label: 'title',
      type: 'string',
      defaultValue: 'Hello world!'
    },
    {
      name: 'description',
      label: 'description',
      type: 'formatted_text'
    },
    {
      name: 'buttonText',
      bs_col_width: 4,
      type: 'string',
      defaultValue: 'Click me!',
      isRequired: true
    },
    {
      name: 'buttonClass',
      bs_col_width: 4,
      type: 'string',
      defaultValue: '',
      options: [
        {
          label: 'Primary',
          value: 'btn-primary'
        },
        {
          label: 'Secondary',
          value: 'btn-secondary'
        },
        {
          label: 'Danger',
          value: 'btn-danger'
        }
      ],
      allowMultipleOptions: false,
      isRequired: true
    },
    {
      name: 'sponsors',
      type: 'repeater'
    },
    {
      name: 'icon',
      label: 'icon',
      type: 'file'
    },
    {
      name: 'myRandomNameForModuleID',
      type: 'modules'
    },
    {
      name: 'template',
      type: 'template',
      template_item_label: 'Module Items',
      template_schema: [
        {
          label: 'Field1',
          name: 'field1',
          category_id: 'cb62ab14-dfac-43f6-89ab-a283445584a4',
          allowMultipleOptions: true
          /** Allow multiple category values to be selected**/
        },
        {
          label: 'Field2Module',
          name: 'field2Module',
          type: 'modules'
        }
      ]
    },
    {
      name: 'massive_object_one',
      label: 'massive_object_one',
      type: 'object',
      object_schema: [
        {
          label: 'Field 1',
          name: 'image1',
          type: 'file',
          defaultValue: {
            id: '32248875-332a-4111-8a1c-f5e1a3752936'
          }
        }
      ]
    },
    {
      name: 'massive_object_two',
      label: 'massive_object_two',
      type: 'object',
      object_schema: [
        {
          label: 'Field 1',
          name: 'image1',
          type: 'file',
          defaultValue: {
            id: '32248875-332a-4111-8a1c-f5e1a3752936'
          }
        }
      ]
    },
    {
      name: 'massive_object_three',
      label: 'massive_object_three',
      type: 'object',
      object_schema: [
        {
          label: 'Field 1',
          name: 'image1',
          type: 'file',
          defaultValue: {
            url: 'https://placehold.co/300'
          }
        }
      ]
    },
    {
      name: 'blogs',
      label: 'blogs',
      type: 'template',
      template_item_label: 'Blog',
      template_schema: [
        {
          label: 'Field0 - Repeater',
          name: 'Field0-Repeater',
          type: 'repeater'
        },
        {
          label: 'Field1',
          name: 'field1',
          category_id: 'cb62ab14-dfac-43f6-89ab-a283445584a4',
          allowMultipleOptions: true,
          type: 'string',
          defaultValue: 'Hello world!'
        },
        {
          label: 'Field2',
          name: 'field2',
          type: 'number',
          defaultValue: 0
        },
        {
          label: 'Field3',
          name: 'field3',
          type: 'boolean',
          defaultValue: false
        },
        {
          label: 'Field4',
          name: 'field4',
          type: 'array',
          options: [],
          defaultValue: []
        },
        {
          label: 'Field5',
          name: 'field5',
          type: 'file'
        },
        {
          label: 'Field6',
          name: 'field6',
          type: 'formatted_text',
          defaultValue: ''
        },
        {
          label: 'Field 7',
          name: 'field7',
          type: 'object',
          object_schema: [
            {
              label: 'Field 7.1',
              name: 'field7.1',
              type: 'string',
              defaultValue: 'Hello world!'
            }
          ]
        },
        {
          label: 'Field 8',
          name: 'field8',
          type: 'template',
          template_schema: [
            {
              label: 'Field 8. name',
              name: 'name',
              type: 'string',
              defaultValue: 'Hello world!'
            }
          ]
        }
      ]
    }
  ]
};
```

--------------------------------

### JavaScript Object Schema for CTA Component

Source: https://docs.google.com/document/d/1dy2p-A3uR9BTs7rKlz3bPCe9i0qZJ5B-l569OklivtA/edit_tab=t.0_bookmark=kix.1hrrfr19lnic

Defines the schema for a 'Call to Action' component, including nested objects and templates. This JavaScript object is used by the SourceFlow Page Builder to configure component properties and their types.

```javascript
export default {
  component: 'CTA',
  label: 'Call to Action',
  component_category: 'default',
  propSchema: [
    {
      name: 'myobject',
      label: 'My Object',
      type: 'object',
      object_schema: [
        {
          name: 'field1',
          label: 'Field 1',
          type: 'string'
        },
        {
          name: 'field2',
          label: 'Field 2',
          type: 'template',
          /** We can even put templates inside objects **/ 
          template_schema: [
            {
              name: 'something',
              label: 'Something',
              type: 'string'
            },
            {
              name: 'somethingElse',
              label: 'Something Else',
              type: 'number'
            },
          ]
        },
      ]
    },
    {
      name: 'mytemplate',
      label: 'My Template',
      type: 'template',
      template_schema: [
        /** other fields **/
        {
          label: 'Field1 - String linked with Category Example',
          name: 'field1',
          category_id: 'cb62ab14-dfac-43f6-89ab-a283445584a4',
          allowMultipleOptions: true,
          type: 'string',
          defaultValue: 'Hello world!'
        },
        {
          name: 'Field8 - Object Example',
          label: 'Field8',
          type: 'object',
          /** We can even put objects inside templates **/
          object_schema: [
            {
              name: 'Field8.1',
              label: 'Field8.1',
              type: 'string',
              defaultValue: 'Hello world!'
            },
            /** more nested fields **/
          ]
        },
      ],
      isRequired: false
    }
  ]
};
```

--------------------------------

### Define Component with Nested Objects and Templates (JavaScript)

Source: https://docs.google.com/document/d/1dy2p-A3uR9BTs7rKlz3bPCe9i0qZJ5B-l569OklivtA/edit_tab=t.0

This JavaScript code defines a component named 'CTA' for the SourceFlow Page Builder. It includes a nested object 'myobject' with string and template fields, and a 'mytemplate' field that supports linked categories and nested objects. This structure allows for complex data modeling within component definitions.

```javascript
export default {
  component: 'CTA',
  label: 'Call to Action',
  component_category: 'default',
  propSchema: [
    {
      name: 'myobject',
      label: 'My Object',
      type: 'object',
      object_schema: [
        {
          name: 'field1',
          label: 'Field 1',
          type: 'string'
        },
        {
          name: 'field2',
          label: 'Field 2',
          type: 'template',
          /** We can even put templates inside objects **/ 
          template_schema: [
            {
              name: 'something',
              label: 'Something',
              type: 'string'
            },
            {
              name: 'somethingElse',
              label: 'Something Else',
              type: 'number'
            }
          ]
        }
      ]
    },
    {
      name: 'mytemplate',
      label: 'My Template',
      type: 'template',
      template_schema: [
        /** other fields **/ 
        {
          label: 'Field1 - String linked with Category Example',
          name: 'field1',
          category_id: 'cb62ab14-dfac-43f6-89ab-a283445584a4',
          allowMultipleOptions: true,
          type: 'string',
          defaultValue: 'Hello world!'
        },
        {
          name: 'Field8 - Object Example',
          label: 'Field8',
          type: 'object',
          /** We can even put objects inside templates **/ 
          object_schema: [
            {
              name: 'Field8.1',
              label: 'Field8.1',
              type: 'string',
              defaultValue: 'Hello world!'
            }
            /** more nested fields **/ 
          ]
        }
      ],
      isRequired: false
    }
  ]
};
```
Tokens:
Raw