Skip to content

A react-based example of Flotiq plugin. This will render a shiny title instead of regular title fields

License

Notifications You must be signed in to change notification settings

flotiq/flotiq-ui-plugin-templates-react

Folders and files

NameName
Last commit message
Last commit date
Mar 19, 2025
Apr 25, 2024
Mar 14, 2025
Mar 17, 2025
Apr 25, 2024
Mar 14, 2025
Mar 14, 2025
Apr 25, 2024
Mar 14, 2025
Mar 14, 2025
Mar 19, 2025
Mar 14, 2025
Mar 17, 2025
Mar 17, 2025
Mar 17, 2025

Repository files navigation

Flotiq logo

Example Flotiq Plugin in React

A react-based example of Flotiq plugin. This will render a shiny title instead of regular title fields

Quickstart:

  1. yarn
  2. yarn start
  3. work work work
  4. update your src/plugin-manifest.json file to contain the production URL and other plugin information
  5. yarn build
  6. paste js code from ./build/static/js/main.xxxxxxxx.js to Flotiq console
  7. navigate to affected Flotiq pages

Dev environment is configured to use:

  • prettier - best used with automatic format on save in IDE, remember to run yarn format before commiting changes
  • eslint - it is built into both start and build commands

Deployment

Loading the plugin

URL

  1. Open Flotiq editor
  2. Open Chrome Dev console
  3. Execute the following script
    FlotiqPlugins.loadPlugin("plugin-id", "<URL TO COMPILED JS>");
  4. Navigate to the view that is modified by the plugin

Directly

  1. Open Flotiq editor
  2. Open Chrome Dev console
  3. Paste the content of static/js/main.xxxxxxxx.js
  4. Navigate to the view that is modified by the plugin

Deployment

  1. Open Flotiq editor
  2. Add a new plugin and paste the URL to the hosted plugin-manifest.json file (you can use https://localhost:3050/plugin-manifest.json as long as you have accepted self-signed certificate for this url)
  3. Navigate to the view that is modified by the plugin

Collaborating

If you wish to talk with us about this project, feel free to hop on our Discord Chat.

If you found a bug, please report it in issues.