FlexView

For very specific pages you can create your own custom FlexView based on React, Angular or any other framework and integrate it in Jet Admin interface. Writing your own custom JS/CSS/HTML has no limits in implementing any page you need.

To integrate your custom FlexView with Jet Admin data you can use Jet Admin SDK library.

Tutorial – Create FlexView

As a result of this tutorial you will get sample FlexView component which you can extend to whatever needs you have.

1. Create your FlexView component project (playground) or clone example

FlexView 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, Vue.js based components or any other.

First you need to create FlexView project where you can develop and test it. This project will be your playground for creating FlexView. It will work the same way as on Jet Admin but will make your development more easy so that you can use your favourite IDE and environment. To make it more simple you can use some of our ready-to-use starter projects on GitHub or use them as a reference:

For example to clone React example and prepare it to work:

git clone git@github.com:jet-admin/jet-flex-view-react-example.git
cd jet-flex-view-react-example
npm install

2. Run your project

After you created your project and cloned example make sure it works by running command (or any other you use):

npm run start
http://localhost:3000/

The project works and you can start developing your FlexView. But before that read next step if need Jet Admin API integration.

Consider the following limitation while developing:

  • You can't use change URL inside FlexView since component is embed inside Jet Admin view

  • Consider incapsulating styles inside your view, not use global styles

3. (optional) Set up Jet API integration

To integrate your custom FlexView with Jet Admin data and API you can use Jet Admin SDK library. To use it you need to install it first:

npm install jet-admin-sdk

To work with API to perform queries SDK needs to know which Project you are working with and your Access Token. When FlexView is uploaded to production it will fetch these automatically, but for development yo need to specify it your own this way:

import { getPublicApiService } from 'jet-admin-sdk';
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
getPublicApiService().projectsStore.setCurrent('YOUR_PROJECT_UNIQUE_NAME');
getPublicApiService().authService.tokenLogin('YOUR_USER_TOKEN');
}
  • YOUR_PROJECT_UNIQUE_NAME – can be taken from URL of your project on Jet Admin

  • YOUR_USER_TOKEN – can be taken from cookie token on https://app.jetadmin.io/

That's it! You can now use Jet Admin API through PublicApiService, for example:

import { getPublicApiService } from 'jet-admin-sdk';
getPublicApiService().currentUserStore.get().subscribe(result => {
if (result) {
console.log('Current User is ' + result.username);
} else {
console.log('Failed to get Current User');
}
});

4. Upload your FlexView to production

Once you are finished with your FlexView or just want to test it in a real application you need to upload it. Build your project first:

npm run build

This will usually create your build files in dist folder, but it can differ for your environment. To upload your FlexView to Jet Admin you need to upload a .zip file with your build files. Go to dist folder and compress all the contents to a single .zip file.

Now go to FlexView create page as shown below (Project Settings → FlexViews → Create FlexView)

Fill in the form and click Create button:

  • Unique Tag Name – tag name that you used for Web Component inside your FlexView project. Should pre prefixed with "jet-" and has dash-case. Also each of your FlexView should have unique tag names across your Jet Admin project.

  • Display Name – name of FlevView used in Jet Admin interface.

  • View Type – affects where FlexView will be visible, has the following options:

    • Common – can be added as a link to menu as an independent page

    • Collection – will be visible as a link on top of Collection list pages. Collection name will be passed to this FlexView as a parameter.

    • Record – will be visible as a link on top of Record view/change pages. Collection name and Record primary key will be passed to this FlexView as parameters.

  • Collection – only of Collection and Record view types. Can limit for which Collection this FlexView will be visible. Can be set to any.

  • Compiled custom elementzip file containing your build files of FlexView.

  • Files to include into page – in order for your FlexView to work JS and maybe CSS files should be included. You should check which files from your zip files should be included. Order of loading can be changed. These files will be included only once when FlexView should be displayed and after inclusion they must defined custom element with tag name the same as your specified for Unique Tag Name.

You are done. You can test your FlexView now. If you want to update it later you can go to Project Settings → FlexViews → Your FlexView and change settings or upload new .zip file.

Common FlexView example
Collection FlexView example
Record FlexView example