https://kuroco.app/assets/js/e9df943a.58b5dce5.js

1"use strict";(self.webpackChunkkurokuro=self.webpackChunkkurokuro||[]).push([["26981"],{71484:function(e,t,n){n.r(t),n.d(t,{metadata:()=>l,default:()=>h,frontMatter:()=>d,contentTitle:()=>r,toc:()=>c,assets:()=>a});var l=JSON.parse('{"id":"management/management-plugin","title":"Admin panel plugin","description":"The Admin panel plugin screen enables you to insert custom plugins into the Kuroco Admin panel pages. Currently, Kuroco supports 2 types of plugins:","source":"@site/docs/management/management-plugin.md","sourceDirName":"management","slug":"/management/management-plugin","permalink":"/docs/management/management-plugin","draft":false,"unlisted":false,"editUrl":"https://github.com/diverta/kuroco-documents/tree/main/packages/create-docusaurus/templates/shared/docs/management/management-plugin.md","tags":[],"version":"current","frontMatter":{"title":"Admin panel plugin","category":"Account settings","weight":1},"sidebar":"documentationSidebar","previous":{"title":"Dashboard widget","permalink":"/docs/management/dashboard-widget"},"next":{"title":"Backup","permalink":"/docs/management/backup"}}'),i=n(74848),s=n(28453);let d={title:"Admin panel plugin",category:"Account settings",weight:1},r,a={},c=[{value:"Plugin list",id:"plugin-list",level:2},{value:"Accessing the screen",id:"accessing-the-screen",level:3},{value:"Item descriptions",id:"item-descriptions",level:3},{value:"Batch actions",id:"batch-actions",level:3},{value:"Adding and editing Admin panel plugins",id:"adding-and-editing-admin-panel-plugins",level:2},{value:"To add a new plugin",id:"to-add-a-new-plugin",level:3},{value:"To edit an existing plugin",id:"to-edit-an-existing-plugin",level:3},{value:"Item Description",id:"item-description",level:3},{value:"Update History",id:"update-history",level:3},{value:"Related documents",id:"related-documents",level:2}];function o(e){let t={a:"a",br:"br",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Admin panel plugin screen enables you to insert custom plugins into the Kuroco Admin panel pages. Currently, Kuroco supports 2 types of plugins:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Vue.js"}),"\n",(0,i.jsx)(t.li,{children:"CSS"}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"plugin-list",children:"Plugin list"}),"\n",(0,i.jsx)(t.h3,{id:"accessing-the-screen",children:"Accessing the screen"}),"\n",(0,i.jsx)(t.p,{children:'In the left sidebar menu, under "SETTINGS", click [Environment] -> [Admin panel plugin].'}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/35/35c97c1a792567ab2024519bd302db9b.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/35/35c97c1a792567ab2024519bd302db9b.png",alt:"Image from Gyazo"})}),"\n",(0,i.jsx)(t.h3,{id:"item-descriptions",children:"Item descriptions"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/f2/f272b7c41d5bacc7b7f0959573d92ab3.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/f2/f272b7c41d5bacc7b7f0959573d92ab3.png",alt:"Image from Gyazo"})}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Item/Button"}),(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Status"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Status of the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Plugin ID"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"ID of the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Name"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Name of the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Type"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Type of plugin (CSS or Vue.js)."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Source"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Location information for the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Target"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Admin panel screen and slot for loading the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Props"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"You can insert a JSON object with initial props to be read by Vue.js plugins. Certain pages and slots use additional props."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Updated on"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Date and time the plugin was last updated."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Edit"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Click [Settings] to open the configuration dialog."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Delete"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Click to remove the plugin."})]})]})]}),"\n",(0,i.jsx)(t.h3,{id:"batch-actions",children:"Batch actions"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/18/18a304019896eac4c8aa4ff077182646.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/18/18a304019896eac4c8aa4ff077182646.png",alt:"Image from Gyazo"})}),"\n",(0,i.jsx)(t.p,{children:"To delete selected plugins in bulk, check the checkboxes on the left side of the list and click [Delete]."}),"\n",(0,i.jsx)(t.h2,{id:"adding-and-editing-admin-panel-plugins",children:"Adding and editing Admin panel plugins"}),"\n",(0,i.jsx)(t.h3,{id:"to-add-a-new-plugin",children:"To add a new plugin"}),"\n",(0,i.jsx)(t.p,{children:"Click [Add] in the upper right corner of the screen."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/e2/e2a769145e703c091aaba081a436ee08.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/e2/e2a769145e703c091aaba081a436ee08.png",alt:"Image from Gyazo"})}),"\n",(0,i.jsx)(t.p,{children:"After entering the content, click [Add] to apply the changes."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/f7/f7bdd9f1ec31b583ca8a76c8782c18ae.png",style:{width:"400px",maxHeight:"none"}})}),"\n",(0,i.jsx)(t.a,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/d3/d3dce3108ffa835172ced92d66040121.png",style:{width:"400px",maxHeight:"none"}})})]}),"\n",(0,i.jsx)(t.h3,{id:"to-edit-an-existing-plugin",children:"To edit an existing plugin"}),"\n",(0,i.jsx)(t.p,{children:'Click [Settings] under the "Edit" column.'}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/4a/4ada618db1b894be69934133b97ab347.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/4a/4ada618db1b894be69934133b97ab347.png",alt:"Image from Gyazo"})}),"\n",(0,i.jsx)(t.p,{children:"After updating the content, click [Update] to apply the changes."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/9a/9a7ff8518b1d1082aaecaec8c7cce538.png",style:{width:"400px",maxHeight:"none"}})}),"\n",(0,i.jsx)(t.a,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/1a/1a57dffeca941a27836d70ecc85a0a3e.png",style:{width:"400px",maxHeight:"none"}})})]}),"\n",(0,i.jsx)(t.h3,{id:"item-description",children:"Item Description"}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Item"}),(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Status"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Option to activate the plugin settings."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Plugin name"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Name of the plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Type"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Type of plugin (CSS or Vue.js)."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Source",(0,i.jsx)(t.br,{})," Component name"]}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["For Vue.js plugins, Kuroco supports MPAs (multi-page applications). Enter the component name of your MPA entry point here (e.g., ",(0,i.jsx)(t.code,{children:"MyEntryPoint"}),")."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Source URL"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Upload location of the plugin. This can be any domain."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Manifest keys"}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["For Vue.js plugins, enter the list of Webpack manifest keys for the app components in the order of loading, separated by semicolons (e.g., ",(0,i.jsx)(t.code,{children:"MyEntryPoint.js;vendors.*"}),"). Values are based on your Webpack code splitting/chunking configurations."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Target",(0,i.jsx)(t.br,{})," Page URI"]}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Relative URI of the Kuroco admin panel page that will load your plugin. Omit the ",(0,i.jsx)(t.code,{children:"/management"})," prefix. You can also specify any custom page, in which case the page will be accessible as exclusive content for the plugin."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Slot name"}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Slot that loads the plugin. Plugins can be loaded in various locations depending on their values. (See:",(0,i.jsx)(t.a,{href:"/docs/reference/management-plugin-slot/",children:"Slots available for admin panel plugins"}),")"]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Slot params"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Some 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."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Props"}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["To pass configurable props to your plugin, enter them here as JSON objects: e.g., ",(0,i.jsx)(t.code,{children:'{"my_prop": "my_prop_value"}'}),"."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Update"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Applies the edits made to the admin panel plugin."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Copy"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Copies the currently existing admin panel plugin to create a new admin panel plugin."})]})]})]}),"\n",(0,i.jsx)(t.h3,{id:"update-history",children:"Update History"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://rcms.g.kuroco-img.app/files/user/gyazo/02/027fc700dbf1d4c99fc9e51a584b70cb.png?width=600","data-zoom-src":"https://rcms.g.kuroco-img.app/files/user/gyazo/02/027fc700dbf1d4c99fc9e51a584b70cb.png",alt:"Image from Gyazo"})}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Item"}),(0,i.jsx)(t.th,{style:{textAlign:"left"},children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Version"}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Displays the version.",(0,i.jsx)(t.br,{}),"Click to check the status of the selected version."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Updated on"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Displays the date and time when the content was updated."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Updated by"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Displays the name of the member who updated the content."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Action"}),(0,i.jsxs)(t.td,{style:{textAlign:"left"},children:["Displays the type of action taken.",(0,i.jsx)(t.br,{}),"There are six types of actions:",(0,i.jsx)(t.br,{}),(0,i.jsxs)(t.ul,{children:[(0,i.jsx)(t.li,{children:"New Addition"}),(0,i.jsx)(t.li,{children:"Update"}),(0,i.jsx)(t.li,{children:"Delete"}),(0,i.jsx)(t.li,{children:"Submit"}),(0,i.jsx)(t.li,{children:"Approve"}),(0,i.jsx)(t.li,{children:"Rejection of Approval"})]})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Comment"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Displays comments left at the time of the update."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Content"}),(0,i.jsx)(t.td,{style:{textAlign:"left"},children:"Displays the updated content."})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"related-documents",children:"Related documents"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/",children:"Apply CSS to a Kuroco management screen with the plugin"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/tutorials/apply-vue-to-a-kuroco-management-screen-with-the-plugin/",children:"Adding Vue components to the admin panel using plugins"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/reference/management-plugin-slot/",children:"Slots available for admin panel plugins"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},28453:function(e,t,n){n.d(t,{R:()=>d,x:()=>r});var l=n(96540);let i={},s=l.createContext(i);function d(e){let t=l.useContext(s);return l.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),l.createElement(s.Provider,{value:t},e.children)}}}]);