silverstripesilverstripe-4

How to add right panel as help content in Silverstripe CMS admin


We've got a project which needs in CMS help for some users, to help guide them through various complex processes. This would be for various ModelAdmin screens.

Ideally we want an onscreen help & were wondering whether we can use the right "preview" panel functionality that is used in the /pages/ section of the CMS.

+-----------+------------+--------------+
|   Left    |   Middle   |    Right     |
+-----------+------------+--------------+
| Side Menu | ModelAdmin | Help Content |
+-----------+------------+--------------+

To keep things easy we'd like the Help content come from the CMS SiteTree itself: https://example.com/help/

Would it be possible for the preview panel functionality to be used in this way?

Thank you in advance.


Solution

  • The right panel you refer to is probably the split screen page preview stuff handeled by the SilverStripeNavigator. I've played around with that a few years ago, but found it was to tightly coupled to the CMS/SiteTree to be of any use for custom stuff.

    But here a few other ideas of what you can do:

    1. add extra infos to FormFields with ->setDescription("hello world") or/and ->seRightTitle("hello world"), eg:
      $fields->addFieldToTab('Root.Main', [
          (new TextField('MyFieldName', $this->fieldLabel('MyFieldName')))
              ->setDescription('Some help text here')
      ]);
    
    1. You can improve the usability of the admin by grouping in Tabs and adding headlines
      $fields->addFieldToTab('Root.SomeTab', [
          //...
          new HeaderField('MyHeader', 'Personal Details of this account'),
          new TextField('FirstName', $this->fieldLabel('FirstName')),
          //...
      ]);
    
    1. Add Help Elements inline with LiteralField
      $fields->addFieldToTab('Root.SomeTab', [
          //...
          new TextField('FirstName', $this->fieldLabel('FirstName')),
          new LiteralField('MyLiteralField', '<p class="message info">A help description here with any HTML you want. Styled what ever way you want</p>');
          //...
      ]);
    
    1. build your own custom sidebar.

    The Blog Module has a custom sidebar for the "Post Options". You could copy what they've done and instead of putting extra FormFields in there, you could use LiteralField to add any HTML in there you want to display your help information.

    enter image description here

    I don't have a code example for that at hand, but I'll imagine if you look at the source code of the blog, it won't be to difficult to figure out how they built the sidebar: https://github.com/silverstripe/silverstripe-blog