Custom component
In PocketBlocks, 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 PocketBlocks.
Familiar with HTML/CSS/JS and the React.js library.
Basics
Drag a Custom component onto the canvas. By default, PocketBlocks 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
Data stores information in key-value pairs, providing an interface for the Custom component to interact with data outside it. For instance, you can reference data of the Custom component in other components in your app via customComponentName.model
, or pass data from other components to the Custom component.
Code
By default, PocketBlocks defines the object model
, and two functions runQuery
and updateModel
.
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 the Custom component.
Implementation
All code of your Custom component, including HTML, CSS, and JavaScript, stores in the Code box in the Properties pane. When your app runs, the custom component will be embedded into an iframe element.To facilitate the interaction between the Custom component and other components in your app, PocketBlocks offers an API for you through global objects. The type definition and description of the objects are as follows.
The following example is the least code that a custom component requires to work.
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 this Text component. Note that you can also reference data from queries in the same way.
Below is the code for this example.
Pass data from custom component to app
For instance, to display certain text from the Custom component in an Input component in the app, you can set the value of custom1.model.name
as the default value of input1
. The dot notation custom1.model.name
accesses the name of the Custom component.
Trigger query from custom component
For instance, given table users
which displays information of all users, 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 "Lor", and then clicks the search button, the table only presents the entries in which the "Name" field contains "Lor".
To implement such a Custom component, first you create query filterUser
to access data from the custom component and set it to run by manual invoke.
Then, you import the "antd" library and use the components Button, Input, Card, and Space. Finally, one more setting for each component inside the Custom component:
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
filterUser
by therunQuery
method when the Search button is clicked.
Last updated