Customizable Page Menus

Antony SiegertPosted on

Scrivito’s top-right menu is customizable!

Menus can make editors’ lives much easier, and we have had several requests to add items to the menu to aid in a more efficient content generation. So, our developers worked hard and took our mantra of complete developer flexibility to heart. Beginning in Scrivito SDK 1.4.0, you can now customize the top-right menu in the Scrivito UI. While we knew there were a few specific cases it should handle, we wanted to provide as many opportunities for developers to add what their teams need. While this is probably meant for our power users, we think it will be just a matter of time before you find a need for customizing the menu too.  

The documentation for this feature includes a great example of how to add a menu item to start a new blog post. As usual, the documentation provides all the specifics for this new feature, Scrivito.extendMenu. Once you have checked that out and are ready to try something else, feel free to follow along as we play around with this new feature. 

Manipulating headlines

For this first example, we are going to add an option to the menu to reverse all the headlines on a page. Yeah, it is not something you would actually do but it is a fun example to show what you can do. Here is the code; while it could be added to the App.js file, it probably better fits in the src/config/scrivito.js file.

src/config/scrivito.js
Copy
...
Scrivito.extendMenu(menu => {
  const p = Scrivito.currentPage();
  const hasHeadlineWidgets = p
    ? Scrivito.Obj.where("id", "equals", p.id())
        .and("_objClass", "equals", "HeadlineWidget")
        .count() > 0
    : false;
  menu.insert({
    id: `reverseHeadlines`,
    icon: rocketIcon,
    title: `Reverse headlines`,
    description: `Reverse headlines. Just for fun.`,
    enabled: hasHeadlineWidgets,
    onClick: () => {
      Scrivito.load(() => Scrivito.currentPage()).then(page => {
        page
          .widgets()
          .filter(w => w.objClass() === "HeadlineWidget")
          .forEach(w =>
            w.update({ headline: [...w.get("headline")].reverse().join("") })
          );
      });
    },
  });

A quick overview since some of you may have skipped over the documentation ;-)

First, we are checking for the current page and making sure there are headlines on the page to manipulate. The menu items need to be free of side effects to prevent crashing the UI so this prevents an error if the page has no headlines and only makes the menu item available if there are. Next, we have the menu.insert and we insert an item with the “reverseHeadlines” id. Then we add an icon, which can be an external URL or point to an internal asset path. In this case, we added a local asset and reference it at the top of the config file: import rocketIcon from "../assets/images/rocket.svg"; Then we have our title which is how it will be displayed in the menu, the description which is the tooltip for the menu item on hover, and the enabled boolean which is set with the ternary operator we set as a constant at the top called hasHeadlineWidgets. Finally, we come to the onClick action.  

The onClick action is the meat and potatoes, as they say. So let's dig in, to begin, we want to make sure Scrivito is ready with Scrivito.load. We are just going to manipulate the current page so once that is loaded we search through its widgets for the Headline widgets, and for each one we update the “headline” attribute and reverse all the text. Fun, right!?! Don't worry, it’s not live to your visitors, you're safely within a working copy.

What would you use it for?

Okay, enough with the shenanigans. Now that you have a basic understanding, what can you imagine for this new functionality? Let us know what custom menu items are (or would be) helpful for your team. We would be happy to showcase your solutions here and share it with all our users. Or, of course, we are always happy to help you develop your own. 

Learn more about enterprise SaaS CMS Scrivito

More great blog posts from Antony Siegert

  • Expanding Scrivito’s Pricing Options

    Announcing new pricing options for Scrivito As we expand the feature set of Scrivito, we also have to determine the most appropriate pricing model for our customers. We have always considered pricing to be an important factor, but the fact remains that the product needs to grow, and requests from...

    Read more

  • Example App Updates

    What is new in the Example App? The Example App has been a big part of the Scrivito journey, not only for you – our customers – but also for us as developers. We developed the Example App to showcase some of what could be done when implementing a Scrivito-based app. It is used, every day, to test...

    Read more

  • The Scrivito Example App now Uses Bootstrap 4

    With Bootstrap 4 finally being released to the wild and with all the new features, of course, we wanted the Scrivito Example App to have the latest and greatest. After all, the Scrivito Example App is our showcase for implementing the Scrivito CMS. While the change from Bootstrap 3 to Bootstrap 4...

    Read more

  • A/B Testing with Scrivito and Google Optimize

    Fine tuning a website takes time, and there are many options to consider. But when it really comes down to it, it's important to find out if the visitors are happy with the improvements. To do this, we need to compare their reactions to the present and the improved versions of the pages...

    Read more

  • How to Create a Blog Post in the Example App

    Creating a blog post is simple with the Example App. A blog post has an author, so we will want to add our author page, too. Every blog post page consists of a title, a subtitle, and a widgetlist. The widgetlist is where you will build up the body of the blog post using the available widgets in...

    Read more

  • Testing Your Scrivito-Based Rails App 

    The question of how to test Scrivito-based apps comes up less often than you would expect, but none the less it is asked. Remember that Scrivito is just Ruby, but being mainly an API, there are some caveats. It is best kept in mind what Scrivito is, a Content Management System, so your testing...

    Read more