❤
npm
Sign UpSign In

flow-app-component

1.1.0 • Public • Published

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

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

Readme

Keywords

Package Sidebar

Install

npm i flow-app-component

Repository

github.com/flowappplatform/component-sdk

Homepage

github.com/flowappplatform/component-sdk#readme

Weekly Downloads

2

Version

1.1.0

License

Apache-2.0

Unpacked Size

35.3 kB

Total Files

11

Last publish

Collaborators

  • hackerbayadmin
Try on RunKit
Report malware