In Lowcoder, you can design custom components using React.js library to satisfy specific needs when building your app. The custom component can be static or dynamic, but either requires coding.

Prerequisites

• Good understanding of how to build an app in Lowcoder.

• Familiar with HTML/CSS/JS and the React.js library.

Basics

Drag aCustom component onto the canvas. By default, Lowcoder adds a title box, a text box, and two buttons into it, as shown below. You can modifyData andCode in theProperties pane to tailor it according to your requirements.

Data

Data stores information in key-value pairs, providing an interface for theCustom component to interact with data outside it. For instance, you can reference data of theCustom component in other components in your app viacustomComponentName.model, or pass data from other components to theCustom component.

Code

By default, Lowcoder defines the objectmodel, and two functionsrunQuery andupdateModel.

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

• updateModel is a function that accepts a single argument of object type. The argument passed toupdateModel will be merged with data of theCustom component.

Implementation

All code of yourCustom component, including HTML, CSS, and JavaScript, stores in theCode box in theProperties pane. When your app runs, the custom component will be embedded into aniframe element.To facilitate the interaction between theCustom component and other components in your app, Lowcoder offers an API for you through global objects. The type definition and description of the objects are as follows.

interface Lowcoder {    // Subscribe to data change    // When data changes, handler will be triggered    // The returned value is the unsubscribe function    subscribe(handler: SubscribeHandler): () => void;    // React HOC component function that accepts a React component    // Return a new component that contains properties: runQuery, model, updateModel    connect(Component: ComponentType<any>): ComponentType;    // Run the specified query    runQuery(queryName: string): Promise<void>;    // Update data    updateModel(patch: any): Promise<any>;}interface SubscribeHandler {    (data: IDataPayload): void;}interface IDataPayload {    model: any;}

The following example is the least code that a custom component requires to work.

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

Data interaction

Pass data from app to custom component

For instance, to pass the text in an input box to a custom component, you can use the{{}} syntax to reference data from thisText component. Note that you can also reference data from queries in the same way.

Below is the code for this example.

<div id="root"></div><script type="text/babel">  const { Button, Card, Space } = antd;  const MyCustomComponent = ({ runQuery, model, updateModel}) => (    <Card title={"Hello, " + model.name}>        <p>{model.text}</p>        <Space>          <Button            type="primary"            onClick={() => runQuery(model.query)}         >            Trigger query          </Button>          <Button            onClick={() => updateModel({ text: "I'm also in a good mood!" })}          >          Update data          </Button>      </Space>    </Card>  );  const ConnectedComponent = Lowcoder.connect(MyCustomComponent);  const root = ReactDOM.createRoot(document.getElementById("root"));  root.render(<ConnectedComponent />);  </script>

Pass data from custom component to app

For instance, to display certain text from theCustom component in anInput component in the app, you can set the value ofcustom1.model.name as the default value ofinput1. The dot notationcustom1.model.name accesses the name of theCustom component.

Trigger query from custom component

For instance, given tableusers which displays information of all users, you want to filter data based on the inputted text in aCustom component. Besides, the filter operation is triggered by clicking a button inside the sameCustom component.

According to the requirement, theCustom component contains anInput component and aButton component. You can also add aText component to provide context to the users of your app. When a user inputs into the text box, for example "gov", and then clicks the search button, the table only presents the entries in which the "email" field contains "gov".

To implement such aCustom component, first you create queryfilterUser to access data from the custom component and set it to run by manual invoke.

select * from users where email like '%{{custom1.model.search}}%';

Then, you import the "antd" library and use the componentsButton,Input,Card, andSpace. Finally, one more setting for each component inside theCustom component:

• Configure theupdateModel method to run and update the data of theCustom component when the text in theInput component changes.

• Trigger the queryfilterUser by therunQuery method when theSearch button is clicked.

<style type="text/css">  body {    padding: 5px;  }</style><link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/antd.min.css"/><script type="text/javascript" src="https://unpkg.com/[email protected]/dist/antd.min.js" ></script>  <div id="root"></div><script type="text/babel">  const { Button, Card, Input, Space } = antd;  const MyCustomComponent = ({ 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(filterUser)}         >            Search          </Button>      </Space>    </Card>  );  const ConnectedComponent = Lowcoder.connect(MyCustomComponent);  const root = ReactDOM.createRoot(document.getElementById("root"));  root.render(<ConnectedComponent />);</script>

Last updated1 year ago