Create a popover

This guide explains how you can create a popover from FDS components, and associate it with an element.

Popovers are usually small components which will appear near a clicked element, button or icon. Popovers can contain additional information about an element or other object, and optionally provide buttons for any further actions, like edit or remove.

Read more about popovers.

We'll create some empty files first and wire them together, before proceeding to build an actual popover UI. The next few steps are very similar for custom modals or sidebars.

1

Create a new package

Create a folder called recipe-popover/ in your packages/ directory.

2

Create the popover component

The popover component could be anything, but the components provided by Fonto fit the rest of the application well and work well for most cases.

Give your file the .jsx extension so that JSX syntax is supported.

Create file packages/recipe-popover/src/RecipePopover.jsx and give it the following content:

JSX

import React from 'react';
 
import { Button, Popover, PopoverBody, PopoverFooter } from 'fds/components';
 
const RecipePopover = ({ togglePopover }) => {
   return (
       <Popover maxWidth="300px" minWidth="220px">
           <PopoverBody> My first Fonto popover!</PopoverBody>
 
           <PopoverFooter>
               <Button type="primary" label="Close" onClick={togglePopover} />
           </PopoverFooter>
       </Popover>
   );
};
 
export default RecipePopover;
3

Add a package dependency

Package dependencies, in a package's fonto-manifest.json, let Fonto's bootstrap phase run the right code at the right time. Files such as install.js, configureSxModule.js and operations.json can only self-register if there's something depending on their package.

A package will work properly if they are included in the dependency tree starting at config/fonto-manifest.json.

Create file packages/recipe-sx-module/fonto-manifest.json if it does not already exist, and add a dependency on the recipe-popover package to it:

JSON

{
    "dependencies": {
        "recipe-popover": "packages/recipe-popover"
    }
}

Your package is now wired. Any of the special-cased package files will now automatically be picked up by FDT, which is vital for the next step to work.

4

Register the popover component

Create file packages/recipe-popover/src/install.js and give it the following content:

JavaScript

import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import RecipePopover from './RecipePopover.jsx';

export default function install() {
    uiManager.registerReactComponent('RecipePopover', RecipePopover);
}

Registering a React component with the uiManager allows you to reference it from other API's, such as CVK options or operations.

The best moment to register components is during install.js.

Now that the element is registered, it can be associated with elements, widgets or operations.

5

Associate the popover with an element configuration

In this guide the popover will only be displayed if the user clicks on <ingredient>. Make a change to its configuration, it might already exist in packages/recipe-sx-module/configureSxModule.js:

JavaScript

// <ingredient>
configureAsInlineFrame(sxModule, 'self::ingredient', 'ingredient', {
    popoverComponentName: 'RecipePopover'
});

Your popover should now show up any time an <ingredient> element is clicked in the editor.

6

Build cool UI, profit

The content that you give your component, packages/recipe-popover/src/RecipePopover.jsx, is entirely up to you.

You can retrieve the XML node that the popover was opened for via the data.contextNodeId prop that Fonto gives your component. It is commonly used with the documentsManager and the useXPath hook.

You've created a React-based popover that opens when a specific element is clicked in the content view. Yay you!