Hello,
I like to setup a simple dashboard view for content managers. It has a pages tab that allows them to navigate to the top tier pages, and a help tab that I’d like to use to list how-to videos and maybe below that a sentence or two instructing on how to contact support. I’d like the how-to videos to be listed nicely just like the default pages view (shown below).
I’m asking here to see what you folks think - what’s a practical way to achieve this? Do I have to figure out how to create a custom widget with a plugin and mess with Vue, etc.? Maybe I create pages that hold the bits of video info (Title, YouTube URL, length) and then tweak how the pages section list them so when I user clicks on them it takes them to the URL instead of the edit screen for the video? What do you folks think. Any insight would be appreciated.
If you want something really nice, with links to the videos when clicking on a video and a preview image directly from YouTube etc., then yes, a custom section would be the way to go.
Wondering if making them virtual pages of a separate parent while keeping them as real pages to their original parent for editing could solve the problem with linking to YouTube…
Thanks for the reply. I can see the default pages section almost getting me there. I’d just want to change the link from the edit page to the URL I set as the videos. So considering the screenshot above, and pretending this is the list of video “pages”, when a user clicks on the home icon they would be taken to YouTube. Doesn’t need to pull the YouTube thumbnail or even hide the ‘…’ menu (although that might be nice - to hide the … menu from editor roles).
The problem I see here is that the whole row links to the page and in fact you still need a link to the page to be able to edit it, otherwise you could override the url. Maybe do it conditionally 
What about a low tech solution, use a info section and hardcode the HTML to appear just like the pages section, minus the status icon and … menu. No pages, just a marked up info section?
That could actually work if you copy the source code ofthe pages list, exchange the URLs and remove the stuff you don’t need.
Not very flexible if you want to add new stuff.
Come to think of it, you can actually return the html from a page model that loops through the children, and call the page model the text option of the info field/section. That way, you can still add stuff dynamically.
Interesting. Right. Thanks for the valuable input @texnixe.
Assuming we’ll go with the static method I’ll share my code here.
# Help tab
tab2:
label: Help
icon: smile
fields:
videos:
label: How-to Videos
type: info
theme: none
text: >
<div data-layout="list" class="k-collection">
<ul class="k-list k-draggable" data-size="auto">
<li class="k-list-item">
<a href="https://youtube.com/yourvideo" class="k-link k-list-item-content" style="text-decoration:none">
<span class="k-list-item-image">
<span aria-hidden="true" data-back="pattern" class="k-icon">
<svg viewBox="0 0 16 16" style="color: rgb(197, 201, 198);"><use xlink:href="#icon-youtube"></use></svg>
</span>
</span>
<span class="k-list-item-text">
<em>CMS Introduction (5:25)</em>
</span>
</a>
</li>
</ul>
</div>
Get’s you this…
Sweet.
Now that I got this far I wonder if there’s some easy way to open up that Youtube video in a modal.
