Comment on page

Custom component

Build HTML/CSS/JS, React, Vue, Angular components

What is a Custom Component?

For particular pages, you can create your custom Component based on HTML/CSS, React, Angular, Vue, or any other framework and integrate it into the Jet Admin interface. Writing your own custom JS/CSS/HTML has no limits in implementing any page you need.
To integrate your custom Component with Jet Admin data you can use the Jet Admin SDK library.

Create an HTML/CSS Component

You can create your Custom HTML components and pass values to them from anywhere else in the application via parameters. Here is a short demo of how to do this:
  1. 1.
    Add an HTML component to your design
  2. 2.
    Add a Text Field to your design
  3. 3.
    From the Right Menu, change the parameter
  4. 4.
    Choose the correct parameter
  5. 5.
    Rename the parameter
  6. 6.
    Change the value of the HTML
  7. 7.
    Add a test value in the text field

Create a Custom Component

A Custom Component uses Web Component specification to integrate any JS-based component to Jet Admin – this allows you to use any Frameworks and Libraries you like as long as you create them as custom Web Components. So it can be React, Angular, or Vue. js-based components, or any other.

Set Custom Component Inputs

You can specify Inputs to pass data inside the Custom Component from Jet Admin if you have defined custom attributes for your Custom Component (Examples from GitHub include them already).

Use Custom Component Outputs

You can specify Outputs to take from your Custom Component and use their values in other Jet Admin components. For such cases, you should set Outputs inside your Custom Component by sending CustomEvent with Output name and its value in the detail field (Examples from GitHub include it already).