Flow Component SDK

Component SDK for Flow.

Install SDK

npm install flow-app-component --save

Import into your React project

import AppComponent from 'flow-app-component';

Basic Example

LinkButton.jsx

import React from 'react';

import AppComponent from 'flow-app-component';

class LinkButtonComponent extends AppComponent {
    constructor() {
        super();
        this.state = {
            properties: [
                {
                    categoryName: 'General',
                    categoryDescription: 'Basic settings for link button.',
                    properties: [
                        {
                            id: 'text',
                            name: 'Link Button',
                            type: 'text',
                            options: {},
                            data: null,
                        },
                        {
                            id: 'page',
                            name: 'Select Page',
                            type: 'select-page',
                            options: {},
                            data: null,
                        },
                    ],
                },
            ],
            iconUrl: 'src/assets/images/link-button-component.svg',
        };
    }

    renderContent() {
        const buttonStyle = {};
        const elemProps = this.getElementProps();
        elemProps.style = Object.assign(this.getDefaultStyle(), buttonStyle);
        return (
          <button {...elemProps}>
            <a>
              {
                  this.getPropertyData('text') || 'Default Button Text'
              }
            </a>
          </button>
        );
    }
}


export default LinkButtonComponent;

App.jsx

import React, { Component } from 'react';

import LinkButton from './path/to/LinkButton.jsx';

class App extends Component {
    constructor() {
        super();
        this.state = {
            propertyData: [
                {
                    properties: [
                        {
                            id: 'text',
                            name: 'Link Button',
                            type: 'text',
                            options: {},
                            data: null,
                        },
                        {
                            id: 'page',
                            name: 'Select Page',
                            type: 'select-page',
                            options: {},
                            data: null,
                        },
                    ],
                },
            ],
        };
    }

    render() {
        return <LinkButton propertyData={this.state.propertyData} />;
    }
}

export default App;

The Schema of a Component

Every component is associated with a set of properties that follow a schema. These properties define how the component is rendered.

Components

The following is the explanation of the terms you'll see for a component.

| Term | Description | Type | | --------------------- | -------------------------------------------------------------------- | ------------------------------------- | | iconUrl | The URL of the icon to show in the Component panel | String | | name | The name of the component | String | | componentType | The type of the component to render | String | | category | The category of the component (used for the Component panel sorting) | String | | parent | The ID of the parent component | String | | showOnComponentsPanel | Should the component be shown on the Component Panel? | Boolean | | isDeleteable | Can the component be deleted? | Boolean | | isValuable | Is the component valuable (prompt before deleting)? | Boolean | | allowsChildren | Does the component allow children? | Boolean | | allowedChildTypes | Allowed types of children | { number: Number, types: String[] }[] | | allowedParentTypes | Allowed types of parents | String[] | | properties | All the properties for the component | Property[] (Below) |

Properties

The following is the schema for the a Property.

| Property Name | Description | Type | | ------------------ | ------------------------------------------------------------ | ------- | | id | The unique ID of the property, used to set and get the value | String | | name | Name of the property | String | | type | The type of the property | String | | multi | If the property should accept an array of values | Boolean | | data | The data stored for the property | Any | | renderOnPropsPanel | Should the property render on the properties panel | Boolean |

The "type" of the property can be any one of the following:

| Type | Description | | -------------- | ---------------------------------------------------- | | text | A text input | | boolean | A true/false input | | description | A long text input | | number | A number input | | color | A color picker input | | dropdown | A dropdown with options to select | | toggle | A toggle input | | image | An image input | | component | Renders the renderOnPropertiesPanel() of a component | | select-page | A page selector | | tables | A CloudBoost table selector | | select-columns | A column selector for a CloudBoost table | | query | A query component for the columns | | graph | A graph selector |

Available Components

| Type | Description | | ---------- | ---------------------------------------------------------------------- | | text | A simple text | | image | An image upload | | link | A link with a href property | | list | A list of items to display | | space | A space component to display space in the view | | app | The parent of all pages | | page | The parent of all components | | directory | A "category" component for the pages of an app | | nav | A Navigation Bar | | navItem | First child of nav | | subNavItem | Child of NavItem | | map | A Google Maps component | | video | A video display component | | search | A search component. Hooked to one of the CloudBoost tables | | container | An empty container for components. | | input | A text input component | | toggle | A boolean or yes/no component | | radio | A Radio component | | checkbox | A Checkbox component | | form | A form component, holds all the inputs, checkboxes, radios and toggles | | loader | A loading component | | dropdown | A dropdown component |

Component Specific Properties

Some properties are specific to certain component. The following table lists such properties.

app

| Property ID | Property Type | Description | | -------------- | ------------- | ----------------------------------------------------------- | | home-page | select-page | The first page to open when the app is opened | | not-found-page | select-page | The page to use for a 404 response | | error-page | select-page | The page to use for an error response | | allowed-roles | dropdown | The allowed roles for the app, others can't access the page |

directory

| Property ID | Property Type | Description | | ------------- | ------------- | ------------------------------------------------------------------ | | allowed-roles | dropdown | Allowed roles for the directory. All child pages will be affected. |

page

| Property ID | Property Type | Description | | ------------- | ------------- | -------------------------------- | | allowed-roles | dropdown | Allowed roles specific to a page |