Display a custom list of pages inside the panel view of a file

The CMS Questions
1

Hi!

I’m using a downloads page to centrally store some documents. I want to display all pages where a specific file is referenced inside the file view. For this I created a fileMethod:

Kirby::plugin('lkssmnt/file-methods', [
  'fileMethods' => [
    'usedInPages' => function () {
      $kirby = kirby();
      $pages = $kirby->site()->index();

      $found = [];

      foreach ($pages as $page) {
        if($page->sidebarBlocks()->isNotEmpty()) {
          foreach($page->sidebarBlocks()->toBlocks()->filterBy("type", "downloads") as $block) {
            if($block->downloads()->isNotEmpty()) {
              foreach($block->downloads()->toStructure() as $download) {
                if($download->file()->isNotEmpty() && $download->file() != null) {
                  if($download->file()->toFile()->uuid()->id() === $this->uuid()->id()) {
                    $found[] = $page;
                  }
                }
              }
            }
          }
        }
      }

      return new Kirby\Cms\Pages($found);
    }
  ]
]);

But this doesnt seem to work as a field or a section:

usedInPages:
  type: pages
  query: page.usedInPages

Do I need to create a custom section for this and if so is it necessary to include a Vue component, when I just want to use the standard pages component?

Or is there another much more simple approach?

Thank you!

2

If I understand correctly, you want to use a pages section inside a file blueprint? I think that is nor possible in this context. Also, you created a file method and called it on page. As an alternative, you could use an info section, see also this plugin: Usage Reference | Kirby CMS Plugins

1 Like
3

Thank you texnixe, that plugin is doing all that I wanted except providing clickable links to the referenced pages. Could you help me figure out why I cannot click the links?

The items have a link property that resolves correctly but the panel renders the previews as tags and not as clickable pages I think. This is what I get as HTML in the panel:

<ul class="k-tags-field-preview k-tags k-pages-field-preview">
  <li>
    <div data-theme="light" to="/pages/informationen+studierenden-service+immatrikulation" type="button" class="k-tag">
      <figure class="k-tag-image k-frame k-icon-frame" style="--fit: contain; --back: var(--color-positive)">
        <svg aria-hidden="true" data-type="page" class="k-icon" style="color: var(--color-white)"><use xlink:href="#icon-page"></use></svg>
      </figure>
      <span class="k-tag-text">Immatrikulation</span>
    </div>
  </li>
</ul>

this is what the Vue component template looks like:

<template>
  <section class="k-usage-references-section">
    <header v-if="headline" class="k-section-header">
      <k-headline>{{ headline }}</k-headline>
    </header>
    <template v-if="references">
      <div class="k-table">
        <table  >
          <thead>
          <tr>
            <th class="k-table-column" data-mobile="true">
              title
            </th>
            <th class="k-table-column" data-mobile="true">
              template
            </th>
            <th class="k-table-column" data-mobile="true">
              page
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="reference in items">
            <td class="k-table-column " data-mobile="true" style="padding-left: 0.75em">
              {{ reference.title }}
            </td>
            <td class="k-table-column"  data-mobile="true" style="padding-left: 0.75em">
              {{ reference.template }}
            </td>
            <td class="k-table-column" data-mobile="true">
              <k-pages-field-preview :value="reference.preview"/>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </template>
  </section>
</template>
4

As it seems it is expected behaviour for the k-pages-field-preview to not be clickable. Instead I just used an a tag in the Vue template to link to the referenced page for now.