So you want to create a FLOWFACT Widget!

FLOWFACT Detail Page Widget Starter Kit

The project "cra-template-flowfact-detail-widget" is an opinionated create-react-app custom template that allows you to start coding your widget. It includes scripts to help initialize, add, and remove your widget from your detail page layout.

To start a new template:

Npm

npx create-react-app your-widget-name --template flowfact-detail-widget

Yarn

yarn create react-app your-widget-name --template flowfact-detail-widget

The project supports both javascript and typescript out of the box.

Before you can start coding:

1. Initialize your widget configuration with your API User Token and Schema

   yarn ffinit --apiUserToken=[A Valid APIUser Token, yo!] --schema=contacts

   The documentation around FLOWFACT Api Users: https://developers.flowfact.com/quick-start/create-API-user

2. Add your widget to the detail page

   yarn ffadd

   This script reads the information from the previous ffinit command to pull the layout for the Schema you've specified. It adds the widget to the bottom of this page.

3. Start a local server to serve your widget

   yarn start

   This will create an endpoint. It will open a browser tab that will error because of the lack of postrobot, but it should be visible in the detail page of your schema.

   You can optionally include a --column=[COLUMN INDEX] flag. If none is provided, it will assume the first column.

4. See your widget in the detail page of the Schema

   If you navigate to the detail of an entity in the schema you've specified, you should see your widget.

5. Modify Widget.js or Widget.tsx and WidgetConfig.js

   You're good to go for both javascript and typescript. The starter kit is already setup so the main entrypoint of your widget is the Widget functional component. A configuration screen is setup in the WidgetConfig functional component. It is configured to route / to Widget and /config to WidgetConfig. Of course, this is just a reactjs app so you can change that to your hearts content.

6. If you ever want to remove the widget

   yarn ffremove

   This will remove your widget from the layout.

Publishing your widget on AWS S3

This assumes you have the aws-cli installed locally. If not here is a link to the AWS CLI documentation: https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html

This also assumes that you've created a S3 Bucket to deploy into. If not, here's an article on how to do that: https://medium.com/serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6

1. First prepare a production build

   yarn build

2. Push to S3

   aws s3 sync build/ s3://[YOUR BUCKET] --acl public-read;

   Example: aws s3 sync build/ s3://mytestflowfactwidgets3bucket --acl public-read;

3. Adjust the widget url from localhost to your S3 URL

   yarn ffretarget --url=[YOUR S3 URL]

   Example: http://mytestflowfactwidgets3bucket.s3-website.eu-central-1.amazonaws.com/

Typescript

Just rename your Widget.js to Widget.tsx and put in required types (or vice versa!). The project supports both jsx and tsx.