Color panel page name based on page data

Problem: I have a lot of pages in Kirby panel and some of them are filled with data and some not. I want to color page name in panels left column in red if, for example, some data (for example textarea “name”) in that page is absent.

Any advice and suggestions will be greatly appreciated.

Hm. Do these pages have different templates/blueprints? If so, you could give them different icons, and then - if you still need different colors on top - you could use a custom panel stylesheet to style the span following an i-element with that particular icon class.

<ul class="nav nav-list sidebar-list datalist-items">
    <li>
  <a class="draggable invisible ui-draggable ui-draggable-handle" data-helper="Project A" data-text="(link: projects/project-a text: Project A)" href="http://localhost/k256/panel/pages/projects/project-a/edit">
    <i class="icon icon-left fa fa-file-o"></i><span>Project A</span>
    <small class="marginalia shiv shiv-left shiv-white">—</small>
  </a>
  <a class="option" data-context="http://localhost/k256/panel/pages/projects/project-a/context" href="#options"><i class="icon fa fa-ellipsis-h"></i></a>
</li> </ul>

An alternative would be to misuse a field that then checks for that condition for each of the subpages and injects a classname based on that condition, which you could then style.

Here is an example field that does something like this for images: https://github.com/brocessing/kirby-previewfiles

1 Like

Can you be more specific? What do you mean? Are these unfinished pages, like placeholders waiting to be worked on?

You can add a custom CSS file to the panel, but you would need someway of adding classes to the panel sidebar, im not sure how to do this or if its possible. Perhaps a plugin.

Scenario: page visitor fills registration form, form is uploaded and page in Kirby cms panel is created dynamically. So far so good. Some placeholders (input fields) are optional, and based on that I want to color pages. If textarea “name” is empty, then page in panel would be red, therefore I could see which page does not have filled that placeholder.

Well, then you need a field that checks thats, as outlined above, and then injects a class via Javascript.

1 Like

All added pages are based on one blueprint. I could go with icon too, but it must be showed if specific placeholder is empty.

Yep, but that is not possible, because you have to define the icon in the blueprint. Same blueprint = same icon.

1 Like

Another idea: Create pages with different blueprints based on what is filled into the form? Then as above.

1 Like

Just putting it out there and it’s not quite what you want, but perhaps it might be easier to make a panel dashboard widget that lists the incomplete pages? At least that way can you can still jump in to pages from the widget.

Some widget help here.

2 Likes

All created pages are with empty placeholder. Admin later fills it. So its for admin purpose - to be able to see - which page he has filled and which still has empty placeholder.

Will check previewfiles… but right now dont understand how to access data of each page in panel. Where I should do my calculation and style setting, would it be: /kirby/panel/app/forms/pages/template.php
or
/kirby/panel/app/widgets/pages/pages.php

No, don’t mess with the core files. You would do the calculation in the field code. Basically, the field “content” would be just the calculations.

But the widget idea is better if it’s just for an overview of what still needs to be done, and not intended for the editors. The additional advantage of the widget is that you can show it based on roles.

1 Like

Widget emptyplaceholder:

emptyplaceholder.php

<?php
use Kirby\Panel\Snippet;
return array(
  'title' => [
    'text' => 'Pages with empty placeholder',
    'link' => panel()->page('uri-of-parent-page')->url('edit'),
    'compressed' => true,
    ],
  'options' => array(
    array(
      'text' => l('dashboard.index.pages.edit'),
      'icon' => 'pencil',
      'link'  => panel()->page('uri-of-parent-page')->url('edit'), 
    )
  ),
  'html'  => function() {
    $pages = panel()->page('uri-of-parent-page')->children()->filterBy('your_filter_condition')->paginated('sidebar');

    $pagination = new Snippet('pagination', array(
      'pagination' => $pages->pagination(),
      'nextUrl'    => $pages->pagination()->nextPageUrl(),
      'prevUrl'    => $pages->pagination()->prevPageUrl(),
    ));

    return tpl::load(__DIR__ . DS . 'emptyplaceholder.html.php', compact('pages', 'pagination'));
  }
);

emptyplaceholder.html.php

<ul class="nav nav-list sidebar-list">
  <?php foreach($pages as $c): ?>
  <?= new Kirby\Panel\Snippet('pages/sidebar/subpage', array('subpage' => $c)) ?>
  <?php endforeach ?>
</ul>

<?= $pagination ?>

<style>
#pages-widget .pagination {
  margin-top: .5em;
  margin-bottom: 0;
  border-top: 2px solid #ddd;
}
</style>
2 Likes

Woow! Huge thanks texnixe!

Was trying to implement, but so far did not get luck.
Have some questions - how I need to refer to parent page if its some levels deep
a) panel()->page(‘root-page/first-level-page/second-level-page’)
b) panel()->page(‘root-page’)->page(‘first-level-page’)->page(‘second-level-page’)
c) site()->find(‘root-page/first-level-page/second-level-page’)

Also in ‘your_filter_conditions’ I wrote like this: filterBy(‘title’, ‘*=’, 0)

The rest I do not need to edit right?

I think that won’t work because you are looking for fields containing 0, not fields that are empty.

Im sure someone will correct me, but i think you need filterBy(‘title’, ‘==’, null) instead.

1 Like

If it’s not a first level page, then you pass a path, e.g.panel()->page('projects/project-a').

I’d use filterBy('title','*=', ''), I have never tested 0. But you want to test for a string here, not false.

It shouldn’t be necessary to edit the rest, as long as I haven’t overlooked any leftovers from my own widget :innocent:

1 Like

As per widgets documentation I copied emptyplaceholder.html.php and emptyplaceholder.php under /kirby/site/widgets/emptyplaceholder/

But noticed, that there is /kirby/panel/app/widgets/pages/ which Im planing to try to modify.

The widget code I gave you above is based on the pages widget. But you can’t overwrite an existing widget (and you don’t want to modify the source code, do you?); if you only want to show the new widget and hide the original pages widget, you can do so in your config.php.

  c::set('panel.widgets', array(
    'emptyplaceholder' => true,
    'pages'    => false,
    'site'     => false,
    'account'  => true,
    'history'  => false,

  ));
}

The order here also determines the order of your widgets on the Dashboard. You can also modify it and add an “add” button to it like in the pages widget.

I think that we talking about different goals… Im trying to achieve this - red colored page title in list if its some input fields are empty:

If I set panel.widgets in config, then in root (in dashboard) I got emptyplaceholder widget, which navigates me to parent page which holds all child pages… its something different.

p.s. sorry if I got misunderstood, what Im meant - parent pages subpage list in left side.

Ah, I see, alright, back to the original idea. But that is not the pages widget.