14df1344.20453a88.js

"use strict";(self.webpackChunkadminforth=self.webpackChunkadminforth||[]).push([[1366],{6680:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>t,contentTitle:()=>l,default:()=>a,frontMatter:()=>o,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"api/Back/interfaces/AdminForthConfigCustomization","title":"AdminForthConfigCustomization","description":"Extends","source":"@site/docs/api/Back/interfaces/AdminForthConfigCustomization.md","sourceDirName":"api/Back/interfaces","slug":"/api/Back/interfaces/AdminForthConfigCustomization","permalink":"/docs/api/Back/interfaces/AdminForthConfigCustomization","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"apiSidebar","previous":{"title":"AdminForthConfig","permalink":"/docs/api/Back/interfaces/AdminForthConfig"},"next":{"title":"AdminForthForeignResource","permalink":"/docs/api/Back/interfaces/AdminForthForeignResource"}}');var r=i(4848),d=i(8453);const o={},l="AdminForthConfigCustomization",t={},c=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"announcementBadge()?",id:"announcementbadge",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"brandLogo?",id:"brandlogo",level:3},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"brandName",id:"brandname",level:3},{value:"Overrides",id:"overrides",level:4},{value:"brandNameSlug",id:"brandnameslug",level:3},{value:"customComponentsDir?",id:"customcomponentsdir",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"customPages",id:"custompages",level:3},{value:"Overrides",id:"overrides-1",level:4},{value:"dateFormats",id:"dateformats",level:3},{value:"datesFormat?",id:"datesformat",level:3},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"emptyFieldPlaceholder?",id:"emptyfieldplaceholder",level:3},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"favicon?",id:"favicon",level:3},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"globalInjections",id:"globalinjections",level:3},{value:"everyPageBottom",id:"everypagebottom",level:4},{value:"header",id:"header",level:4},{value:"sidebar",id:"sidebar",level:4},{value:"userMenu",id:"usermenu",level:4},{value:"loginPageInjections",id:"loginpageinjections",level:3},{value:"underInputs",id:"underinputs",level:4},{value:"showBrandNameInSidebar",id:"showbrandnameinsidebar",level:3},{value:"Overrides",id:"overrides-2",level:4},{value:"styles?",id:"styles",level:3},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"timeFormat",id:"timeformat",level:3},{value:"Overrides",id:"overrides-3",level:4},{value:"title?",id:"title",level:3},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"vueUsesFile?",id:"vueusesfile",level:3},{value:"Inherited from",id:"inherited-from-8",level:4}];function h(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"adminforthconfigcustomization",children:"AdminForthConfigCustomization"})}),"\n",(0,r.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"Omit"}),"<",(0,r.jsx)(n.code,{children:"AdminForthInputConfigCustomization"}),", ",(0,r.jsx)(n.code,{children:'"loginPageInjections"'})," | ",(0,r.jsx)(n.code,{children:'"globalInjections"'}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"announcementbadge",children:"announcementBadge()?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"announcementBadge"}),": (",(0,r.jsx)(n.code,{children:"user"}),") => ",(0,r.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AnnouncementBadgeResponse",children:(0,r.jsx)(n.code,{children:"AnnouncementBadgeResponse"})})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Function to return custom badge in side bar for users. Can return text or html\nIf function is not passed or returns null, badge will not be shown.\nExecution is done on admin app load."}),"\n",(0,r.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{style:{textAlign:"left"},children:"Parameter"}),(0,r.jsx)(n.th,{style:{textAlign:"left"},children:"Type"})]})}),(0,r.jsx)(n.tbody,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{style:{textAlign:"left"},children:(0,r.jsx)(n.code,{children:"user"})}),(0,r.jsx)(n.td,{style:{textAlign:"left"},children:(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminUser",children:(0,r.jsx)(n.code,{children:"AdminUser"})})})]})})]}),"\n",(0,r.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"/docs/api/Common/type-aliases/AnnouncementBadgeResponse",children:(0,r.jsx)(n.code,{children:"AnnouncementBadgeResponse"})})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.announcementBadge"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"brandlogo",children:"brandLogo?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"brandLogo"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Path to your app logo"}),"\n",(0,r.jsxs)(n.p,{children:["Example:\nPlace file ",(0,r.jsx)(n.code,{children:"logo.svg"})," to ",(0,r.jsx)(n.code,{children:"./custom"})," folder and set this option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"brandLogo: '@@/logo.svg',\n"})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-1",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.brandLogo"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"brandname",children:"brandName"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"brandName"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"overrides",children:"Overrides"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.brandName"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"brandnameslug",children:"brandNameSlug"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"brandNameSlug"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Slug which will be used on tech side e.g. to store cookies separately.\nCreated automatically from brandName if not set."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"customcomponentsdir",children:"customComponentsDir?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"customComponentsDir"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Relative or absolute path to custom components directory\nBy default equals  ",(0,r.jsx)(n.code,{children:"./custom"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Custom .vue files, images, and any other assets placed in this directory can be accessed in AdminForth components and configs with ",(0,r.jsx)(n.code,{children:"@@/"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["For example if file path is ",(0,r.jsx)(n.code,{children:"./custom/comp/my.vue"}),", you can use it in AdminForth config like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"components: {\n show: '@@/comp/my.vue',\n}\n"})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-2",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.customComponentsDir"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"custompages",children:"customPages"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"customPages"}),": ",(0,r.jsx)(n.code,{children:"AdminForthPageDeclaration"}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"overrides-1",children:"Overrides"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.customPages"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"dateformats",children:"dateFormats"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"dateFormats"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"datesformat",children:"datesFormat?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"datesFormat"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"DayJS format string for all dates in the app.\nDefaulted to 'MMM D, YYYY'"}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-3",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.datesFormat"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"emptyfieldplaceholder",children:"emptyFieldPlaceholder?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"emptyFieldPlaceholder"}),": ",(0,r.jsx)(n.code,{children:"string"})," | ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Placeholder for empty fields in lists and show views, by default empty string ''"}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-4",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.emptyFieldPlaceholder"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"favicon",children:"favicon?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"favicon"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Path to your app favicon"}),"\n",(0,r.jsxs)(n.p,{children:["Example:\nPlace file ",(0,r.jsx)(n.code,{children:"favicon.png"})," to ",(0,r.jsx)(n.code,{children:"./custom"})," folder and set this option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"favicon: '@@/favicon.png',\n"})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-5",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.favicon"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"globalinjections",children:"globalInjections"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"globalInjections"}),": ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"everypagebottom",children:"everyPageBottom"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"everyPageBottom"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminForthComponentDeclarationFull",children:(0,r.jsx)(n.code,{children:"AdminForthComponentDeclarationFull"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"header",children:"header"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"header"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminForthComponentDeclarationFull",children:(0,r.jsx)(n.code,{children:"AdminForthComponentDeclarationFull"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"sidebar",children:"sidebar"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"sidebar"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminForthComponentDeclarationFull",children:(0,r.jsx)(n.code,{children:"AdminForthComponentDeclarationFull"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"usermenu",children:"userMenu"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"userMenu"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminForthComponentDeclarationFull",children:(0,r.jsx)(n.code,{children:"AdminForthComponentDeclarationFull"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"loginpageinjections",children:"loginPageInjections"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"loginPageInjections"}),": ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"underinputs",children:"underInputs"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"underInputs"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/Common/interfaces/AdminForthComponentDeclarationFull",children:(0,r.jsx)(n.code,{children:"AdminForthComponentDeclarationFull"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"showbrandnameinsidebar",children:"showBrandNameInSidebar"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"showBrandNameInSidebar"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"overrides-2",children:"Overrides"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.showBrandNameInSidebar"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"styles",children:"styles?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"styles"}),": ",(0,r.jsx)(n.code,{children:"Object"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Object to redefine default styles for AdminForth components.  Use this file as reference for all possible adjustments ",(0,r.jsx)(n.a,{href:"https://github.com/devforth/adminforth/blob/main/adminforth/modules/styles.ts",children:"https://github.com/devforth/adminforth/blob/main/adminforth/modules/styles.ts"})]}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-6",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.styles"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"timeformat",children:"timeFormat"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"timeFormat"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"overrides-3",children:"Overrides"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.timeFormat"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"title",children:"title?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"title"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"HTML title tag value, defaults to brandName"}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-7",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.title"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"vueusesfile",children:"vueUsesFile?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"vueUsesFile"}),": ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Path to custom .ts file which allows to inject custom Vue uses in SPA or add custom imports."}),"\n",(0,r.jsxs)(n.p,{children:["Example: Create file: ",(0,r.jsx)(n.code,{children:"./custom/vue-uses.ts"})," with next content:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import HighchartsVue from 'highcharts-vue';\n// import '@@/custom.scss'; // here is how you can import custom styles\n\nexport default function (app) {\n   app.use(HighchartsVue);\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:"Install HighCharts into custom folder:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bashcreating",metastring:"rec",children:"cd custom\nnpm init -y\nnpm install highcharts highcharts-vue\n"})}),"\n",(0,r.jsx)(n.p,{children:"And specify vueUsesFile in AdminForth config:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"vueUsesFile: '@@/vue-uses.ts',\n"})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-8",children:"Inherited from"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"Omit.vueUsesFile"})})]})}function a(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>o,x:()=>l});var s=i(6540);const r={},d=s.createContext(r);function o(e){const n=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(d.Provider,{value:n},e.children)}}}]);