Skip to main content

Admin panel plugin

The Admin panel plugin screen enables you to insert custom plugins into the Kuroco Admin panel pages. Currently, Kuroco supports 2 types of plugins:

  • Vue.js
  • CSS

Accessing the screen

In the left sidebar menu, under "SETTINGS", click [Environment] -> [Admin panel plugin].

Image from Gyazo

Item descriptions

Image from Gyazo

Item/ButtonDescription
StatusStatus of the plugin.
Plugin IDID of the plugin.
NameName of the plugin.
TypeType of plugin (CSS or Vue.js).
SourceLocation information for the plugin.
TargetAdmin panel screen and slot for loading the plugin.
PropsYou can insert a JSON object with initial props to be read by Vue.js plugins. Certain pages and slots use additional props.
Updated onDate and time the plugin was last updated.
EditClick [Settings] to open the configuration dialog.
DeleteClick to remove the plugin.

Adding and editing Admin panel plugins

  • To add a new plugin, click [Add] in the upper right corner of the screen.
  • To edit an existing plugin, click [Settings] under the "Edit" column.

After configuring the plugin contents, click [Add] or [Update] to apply the changes.

Image from Gyazo

Image from Gyazo

ItemSub-itemDescription
StatusOption to activate the plugin settings.
Plugin nameName of the plugin.
TypeType of plugin (CSS or Vue.js).
SourceComponent nameFor Vue.js plugins, Kuroco supports MPAs (multi-page applications). Enter the component name of your MPA entry point here (e.g., MyEntryPoint).
URLUpload location of the plugin. This can be any domain.
Manifest keysFor Vue.js plugins, enter the list of Webpack manifest keys for the app components in the order of loading, separated by semicolons (e.g., MyEntryPoint.js;vendors.*). Values are based on your Webpack code splitting/chunking configurations.
TargetPage URIRelative URI of the Kuroco admin panel page that will load your plugin. Omit the /management prefix. You can also specify any custom page, in which case the page will be accessible as exclusive content for the plugin.
Slot nameSlot that loads the plugin. Plugins can be loaded in various locations depending on their values. (See:Available slots and slot parameters below for details.)
Slot paramsSome pages allow slot params that configure specific conditions for loading the plugins. For example, the content editor page may load a plugin only for specific user groups.
PropsTo pass configurable props to your plugin, enter them here as JSON objects: e.g., {"my_prop": "my_prop_value"}.

Available slots and slot parameters

Vue.js plugins

Page RUIAvailable slotsAvailable slot parameters
anyEmpty-
/topics/topics_edit/ext_col_NNtopics_group_id=G
/inquiry/inquiry_report/list_main_top-
/inquiry/inquiry_bn_list/list_main_top-
/member/member_edit/Item name-

CSS plugins

Page URIAvailable slotsAvailable slot parameters
Anyhead-

Changelog

Click the [Changelog] to see a list of the history of editing the plugin.

Image from Gyazo

Plugin changelog

Image from Gyazo

Item  Description  
VersionDisplays the version.
You can see the target version after clicking the version link.
Updated onDisplays the date and time the content was updated.
Updated byDisplays the name of the member who updated the content.
ActionDisplays the type of processing performed.
There are six types of statuses as follows
  • Create new
  • Update
  • Deleted
  • Request
  • Approved
  • Reject Approval
CommentDisplays the comments at the time of update.
ContentDisplays the updated contents.

Support

If you have any other questions, please contact us or check out Our Slack Community.