How to create custom panel home page?

The CMS Questions
1

I’m wanting to create a fully customized panel home page. On Discord folks suggested that the way to achieve this is to extend the default site view. While trying to do that, I’ve hit an issue.

When extending other views, only defining the template is sufficient. With the site view, however, only defining the template results in all of the dynamic Vue-defined data and methods and such to be undefined, resulting in errors.

This is what I’ve tried (note that the template markup here is directly copied from kirby/SiteView.vue at main · getkirby/kirby · GitHub).

window.panel.plugin('namespace/customSiteView', {
   components: {
      'k-view': {
         extends: 'k-view',
         template: /*html*/ `
            <k-inside>
               <k-view
                  :data-locked="isLocked"
                  data-id="/"
                  data-template="site"
                  class="k-site-view"
               >
                  <k-header
                     :editable="permissions.changeTitle && !isLocked"
                     :tabs="tabs"
                     :tab="tab.name"
                     @edit="$dialog('site/changeTitle')"
                  >
                     {{ model.title }}
                     <template #left>
                        <k-button-group>
                           <k-button
                              :link="model.previewUrl"
                              :responsive="true"
                              :text="$t('open')"
                              icon="open"
                              target="_blank"
                              class="k-site-view-preview"
                           />
                           <k-languages-dropdown />
                        </k-button-group>
                     </template>
                  </k-header>

                  <k-sections
                     :blueprint="blueprint"
                     :empty="$t('site.blueprint')"
                     :lock="lock"
                     :tab="tab"
                     parent="site"
                     @submit="$emit('submit', $event)"
                  />
               </k-view>
               <template #footer>
                  <k-form-buttons :lock="lock" />
               </template>
            </k-inside>
         `,
      },
   },
})

When loading that, the site throws the error “isLocked is not defined”.

Not sure if it should be possible to extend k-view and only define the template (i.e. have it inherit all of the other Vue properties defined on k-view), but because this work with other templates it seems that doing the same here should also work.

Grateful for any insight.

2

Thinking on this a little more: Having to extend/replace the site view in order to simply customize the panel’s home page feels wrong. Feels like it should be possible to create something like home.js that would load a view component that would be responsible for displaying content on the panel’s home page (i.e. everything between the panel-wide header and footer).

3

Alright, I think I found the least-painful approach for this. Rather than extending the site view, simply create a custom section or field and load that via site.yml.

In /customHomeView/index.js

window.panel.plugin('namespace/customHomeView', {
   sections: {
      customHomeView: {
         template: /*html*/ `
            <h2>Testing...</h2>
         `,
      },
   },
})

In site.yml

sections:
  main:
    type: customHomeView
4

I guess having a custom section or field would be the simplest, like you mentioned above.

Otherwise, instead of overwriting the Site view, having a custom area and then changing a users home option to that could also serve your purpose.

1 Like
5

Oh, hadn’t realized that it’s possible to create a custom section. That’s a cleaner and more logical approach. Thanks for mentioning it!