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 
...
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