Custom Component
Learn how to configure custom components in Momen.
Introduction
An introduction to the usage of custom components to develop a counting component from scratch.
Prerequisites
Some basic knowledge of Git / Frontend / React and Web is required.
Detailed Configuration Steps
Custom projects need to be hosted on the developer's GitHub public repository. Momen provides a template project that users can directly fork and develop according to their needs (be careful not to clone the template project directly). The template project is located at https://github.com/oychao/zvm-custom-comp-template.
After cloning the project, the project under your own repository will be cloned locally. The custom template project is a react project based on Vite and related ecosystems, where developers can create any new component they want. But in order to work with Momen, it must meet certain specifications.
After retrieving the project, add the Count component under src/components/ as follows.
Components must be exported in the default of src/components/index.ts, which is the entry point for exposing components, so be careful to export in the default object.
In addition to this you need to configure the information about the exposed components in config.json. This step is to access to the information about the component in the Momen editor.
CustomComponentItems is the place where individual components are configured, the key and name should be the same as the custom component name, imagePath is the relative path to the preview image, and description is the description of the component.
Version is the version information, every time you release a version, you need to update a version, just follow the npm general specification.
App.tsx is used for local debugging of components, developers can run npm run dev locally to debug components. Note that the debugging here does not affect the runtime of the Momen project, and based on the configuration above, the only custom components that are really exposed are the config.json and the Count under src/components/index.ts.
Once development is complete, commit the code to a GitHub repository (requires a master branch, master / main).
Click GitHub icon in the upper right corner of the User Center, configure the repository's display name and url, and click Import.
At this point, the first new repository and version are built.
After this, select the component that needs to be published, you can see the name of the component you just configured, the preview image, and the description information.
The status of a successful release is as follows.
When users need to release a new version after adding, updating, or deleting components in their own repository, update the component information and version name in src/components/index.ts and config.json, and then click the + in the left list of the repository.
Next, click on the GitHub icon in the upper right corner of the left column and select the version that was just released, at this point the list of optional components will have more components that were just released.
Note that you must click Preview to see the effectn of the custom component.
You can then view it in Mirror and Preview.
Data Interaction with Host Project
Custom components currently support two ways of interacting with the host project.Refer to the project address https://github.com/oychao/zvm-custom-comp-working.
Global Data
Global data declared in the project can be read and written directly by the custom component.
Configure global data in the project.
You can read it directly in the custom component (here the Display is a sample custom component, you can see that you can already read the value of the global data in its properties).
Declaring Parameters
A custom component can implement the data binding configuration for the right column by configuring parameters in config.json. The following is the configuration of config.json and the implementation of the Display component in the sample project.
Currently supported attribute type declarations include TEXT, FLOAT8, INTEGER, BOOLEAN, OBJECT, ARRAY, and IMAGE.
To see how a custom component works in Momen, please refer to our AI landing page. The guide of embedding an Iframe in Momen is here: How to Embed a Momen Project into Your Website.
If you encounter any issues during the process, feel free to join our Discord community for assistance.
About Momen
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
Last updated
