flow-app-component v1.1.0

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.

Properties

The following is the schema for the a Property.

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

Available Components

Component Specific Properties

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

app

directory

page