How it works...

You inject your snippet directly into the snippet bar's view. What is crucial is that you attach the right classes and insert your code at the right place.

A snippet needs to have one root element (in our case, the outermost div) that contains an element with the oe_snippet_thumbnail class and another with the oe_snippet_body class. The first is used to display the snippet in the bar, and the second contains the actual definition of the snippet. For the thumbnail, it makes sense to use a fontawesome icon and add some classes for the layout. For the snippet body, you can add whatever HTML you need for your goals. In general, it's a good idea to use section elements and the bootstrap classes, because for them, Odoo's editor offers edit and resize controls out of the box.

The position to insert the snippet determines in which section of the bar it shows up. Our choice was //div[@id='snippet_feature']/div[@class='o_panel_body'], which places it in the features section. With the snippet_structure, snippet_content and snippet_effect IDs, you can place your snippet in the respective other sections.

The div we injected in //div[@id='snippet_options'] offers the user choices in the customize menu. Note the attribute data-selector that contains a JQuery selector determining for which element the option is to be shown. In the example, the first option list is shown when the whole container is selected, while the second one, about the table style, is shown when the table is selected.

The data-drop-near and data-drop-in attributes determine where the snippet can be placed when dragging it out of the snippet bar. Those are also JQuery selectors and, in the example, we allow putting the snippet basically anywhere that content can go.

For the options themselves, the data-select-class and data-toggle-class attributes allow the user to set either one (select) or multiple (toggle) classes on the element selected by the data-selector attribute. Our first set of options sets classes later used by the JavaScript code. The second set of options sets classes directly in the table, which will change its layout accordingly.

The JavaScript code uses the snippet animation framework to execute some code every time the snippet is loaded. We use it to query the current list of books to be presented to the user. The key property here is the selector defined, which instructs the framework to run our class when there's an element matching this selector.