Custom component

Using the React.js framework, you can create unique components in QuickDEV to meet certain requirements when developing your application. Either a dynamic or static custom component needs to be coded.

Prerequisites

• Good knowledge of QuickDEV app development.

• Familiar using the React.js library and HTML, CSS, and JS.

Basics

Drag a Custom component onto the canvas. By default, QuickDEV adds a title box, a text box, and two buttons into it, as shown below. You can modify Data and Code in the Properties pane to tailor it according to your requirements.

Click the border instead of the inside area to select a Custom component and display its property settings.

Data

Key-value pairs are used to store data, which acts as an interface for the Custom component to interact with external data. CustomComponentName.model, for instance, enables you to reference data from the Custom component in other components within your application or transfer data from other components to the Custom component.

Code

QuickdDEV defines the object model by default, and its two functions, runQuery and updateModel, do the same.

• runQueryis a function that accepts a query name in string format. For example, runQuery(model.query).

• updateModelis a function that accepts a single argument of object type. The argument passed to updateModel will be merged with data of the Custom component.

Implementation

The Code box in the Properties pane contains all of your Custom component's code, including HTML, CSS, and JavaScript. The custom component will be integrated into an iframe element when your application runs. QuickDEV provides you with an API through global objects to make it easier for the Custom component to communicate with other parts of your application. The objects' description and type definition are as follows.

interface QuickDEV {
    // Subscribe to data change
    // When data changes, handler will be triggered
    // The returned value is the unsubscribe function
    subscribe(handler: SubscribeHandler): () => void;
    // A React component can be accepted by the React HOC component function.
    // A new component with properties is returned: query, model, and update model
    connect(comp: ComponentType<any>): ComponentType;
    // Execute the given query.
    runQuery(queryName: string): Promise<void>;
    // Update the data based on model
    updateModel(patch: any): Promise<any>;
}

interface SubscribeHandler {
    (data: IDataPayload): void;
}

interface IDataPayload {
    model: any;
}

The minimum of code needed for a Custom component to work is shown in the following example.

<div id="react"></div>
<script type="text/babel">
    const MyCustomComponent = ({ runQuery, model, updateModel }) => (
        <p>Hello, world!</p>
    );
    const ConnectedComponent = QuickDEV.connect(MyCustomComponent);
    ReactDOM.render(<ConnectedComponent />, 
document.getElementById("react"));
</script>

Data interaction

Pass data from app to custom component

For example, you can use the {{}} syntax to reference data from this Text component in order to send the text in an input box to a custom component. Keep in mind that you may use the same method to refer to data from queries.

Pass data from custom component to app

For example, you can define the value of custComp1.model.email as the default value of inputEmail for an Input component in the app to show specific text from the Custom component. In order to get the email from the Custom component, you have to use the dot notation custComp1.model.email

Trigger query from custom component

For instance, given table employeeswhich displays information of all employees, you want to filter data based on the inputted text in a Custom component. Besides, the filter operation is triggered by clicking a button inside the same Custom component.

According to the requirement, the Custom component contains an Input component and a Button component. You can also add a Text component to provide context to the users of your app. When a user inputs into the text box, for example "gmail", and then clicks the search button, the table only presents the entries in which the "email" field contains "gmail".

To implement such a Custom component, first you create query filterEmployeesto access data from the custom component and set it to run by manual invoke.

select * from employees where email like '%{{custComp1.model.search}}%';

The "antd" library is then imported, and the components Button, Input, Card, and Space are used. Lastly, each component within the Custom component has one more setting:

• Configure the updateModel method to run and update the data of the Custom component when the text in the Input component changes.

• Trigger the query filterEmployeesby the runQuery method when the Search button is clicked.

<style type="text/css">
  body {
    padding: 5px;
  }
</style>
  
<link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.21.4/dist/antd.min.css"/>
<script type="text/javascript" src="https://unpkg.com/antd@4.21.4/dist/antd.min.js" ></script>

<div id="root"></div>

<script type="text/babel">
  const { Button, Card, Input, Space } = antd;
  const CustComp1= ({ runQuery, model, updateModel}) => (
    <Card title={"Hello, " + model.name + " filters data for you!"}>
        <Space>
          <Input value={model.search} onChange={e => updateModel({ search: e.target.value})}
                 placeholder="Input a name" />
          <Button type="primary" onClick={() => runQuery(filterEmployees)}>
            Search
          </Button>
      </Space>
    </Card>
  );
  
  const ConnectedComponent = QuickDEV.connect(CustComp1);
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ConnectedComponent />);
</script>