adminix-designer-react v0.2.91

Adminix designer for React.js

About Adminix

Adminix is a serverless workflow automation platform. It connects to your AWS account and configures automated workflows using serverless functionality. It is also an embeddable solution that you can integrate into your web application, giving it workflow automation capabilities. Please read more on our website.

Requirements

The minimum supported version of React is v16.8. If you use an older version, upgrade React to use this library.

Getting started

Minimal example

1. First, you need to sign up. or login. to Adminix. After that go to the profile page, go to developer tab and generate an access token.

2. Install adminix-designer-react

   npm install --save adminix-designer-react
     
   or 
     
   yarn add adminix-designer-react

3. Generate a temporary access token inside your back-end.

   import axios from 'axios';

// inside your back-end call this function and return temporary access token const generateTemporaryAccessToken = ({ workflowId }) => { const url = https://api-eu.adminix.io/api/v1/workflows/${workflowId}/generate_embeddable_link; const response = await axios.post(url, { headers: { Authorization: Bearer ${process.env.ADMINIX_ACCESS_TOKEN}, }, });

return response.data.token; };

export default generateTemporaryAccessToken;

4. Then import the component and start using it.

```jsx
import { useCallback } from 'react';
import WorkflowDesigner, { useWorkflow } from 'adminix-designer-react';

// Please make sure that you fetched token and you have workflowId
const ExampleComponent = ({ token, workflowId }) => {
const workflow = useWorkflow({ token, workflowId });

const onSaveClick = useCallback(() => {
  workflow.save();
}, [workflow]);

const onDeployClick = useCallback(() => {
  workflow.deploy();
}, [workflow]);

const onSave = useCallback(() => {
  alert('onSave callback');
}, []);

const onDeploy = useCallback(() => {
  alert('onDeploy callback');
}, []);

const onDeploying = useCallback(() => {
  alert('onDeploying callback');
}, []);

const onChanged = useCallback(() => {
  console.log('onChanged callback');
}, []);

return (
  <WorkflowDesigner
    workflow={workflow}
    width="100%"
    height="500px"
    onSave={onSave}
    onDeploy={onDeploy}
    onDeploying={onDeploying}
    onChanged={onChanged}
    colorPrimary="#568CDC"
    fontSize="14"
    disableMessages={false}
    disableActions={false}
  />
);
};

export default ExampleComponent;