Displaying Rapido in Plone

We can see a block by visiting its URL:

Similarly for a record:

But it just returns the HTML generated by the block.

To show our blocks in our Plone site, there are 4 possibilities:

Diazo rules

We can use the Diazo include directive to get the Rapido block content and inject it in our pages with before, after or replace directives.

Example:

<before css:content="#content-core">
    <include css:content="form" href="/@@rapido/myapp/blocks/simpleblock" />
</before>

Extra views

Warning

Since rapido.plone 1.1, we can declare first-class Plone views from Rapido, but it requires plone.resources 1.2.

If we do not want to just inject a small piece of HTML in existing pages, but use a Rapido block as the main part of the page, we can declare a block as a view in its YAML file:

view:
    id: my-custom-view
    with_theme: true

And then we call @@my-custom-view on any content, like:

and it displays our block as main page content.

If the with_theme property is false, the page is rendered without the Plone theme (we just get the block by itself).

Extra views before 1.1

DEPRECATED since rapido.plone 1.1

If we do not want to just inject a small piece of HTML in existing pages, but create a new view for our contents, we can use the Rapido neutral views.

Neutral views are obtained by adding @@rapido/view/<any-name> to a content URL. It will just return the content’s default view (that is why we call them neutral).

For instance, all those URLs display the same thing:

http://localhost:8080/Plone/front-page
http://localhost:8080/Plone/front-page/@@rapido/view/
http://localhost:8080/Plone/front-page/@@rapido/view/abc
http://localhost:8080/Plone/front-page/@@rapido/view/123

So we are able to call a content with a URL we control, and that allows us to create specific Diazo rules for it using the if-path attribute.

Hard-coded injection

<rules if-path="@@rapido/view/show-report">
    <replace css:content="#content">
        <include css:content="form" href="/@@rapido/stats/blocks/report" />
    </replace>
</rules>

In this example, if we open:

we will see our page main content replaced with our report block.

Dynamic injection

We can also dynamically display a Rapido resource specified in the URL. Rapido provides an URL injection pattern which allows to refer to the parent request in our Diazo rule.

The pattern is: $<integer>, where the integer specifies the starting position after @@rapido to get the path to inject.

For instance:

  • with http://localhost:8080/Plone/@@rapido/view/show-report/5654654, $3 gets the part of the path starting at the 3rd element after @@rapido, which is: 5654654,
  • with http://localhost:8080/Plone/@@rapido/view/show-report/myapp/record/5654654, $3 gets the part of the path starting at the 3rd element after @@rapido, which is: myapp/record/5654654,
  • with http://localhost:8080/Plone/@@rapido/view/show-report/myapp/record/5654654/edit, $5 gets the part of the path starting at the 5th element after @@rapido, which is: 5654654/edit.

Examples:

<rules if-path="@@rapido/view/show-report">
    <replace css:content="#content-core">
        <include css:content="form" href="/@@rapido/$3" />
    </replace>
</rules>

if we open:

we will render myapp/record/my-record-id in our page main content.

We could also do:

<rules if-path="@@rapido/view/show-report">
    <replace css:content="#content-core">
        <include css:content="form" href="/@@rapido/myapp/record/$3" />
    </replace>
</rules>

if we open:

we will get the very same rendering as in our previous example.

Mosaic

Mosaic is a layout editor.

It allows to add and manipulate tiles in our content layouts.

Rapido provides a Mosaic tile, so any Rapido block can be added as a tile to our layouts.

To enable it, we need to install Mosaic and then to import a specific Rapido Generic Setup profile named “rapido.plone mosaic tile” from the ZMI >>> portal_setup >>> Import and click on “Import all steps” button.

Here the “Import” page link from portal_setup tool for run Generic Setup profile:

Mockup patterns

Some Mockup patterns can display contents provided by an URL. The two main use cases are:

  • Display a Rapido block in a modal: we use the plone-modal pattern on a <a> element, the Rapido block URL will be provided in its href attribute, and we just need to specify form.rapido-block as content selector (because plone-modal default content selector is #content, which is accurate for a Plone page but not for a Rapido block). Example:

    We create a block named my-content containing whatever we might need, and we create a block named menu containing the following HTML:

    <a href="@@rapido/my-app/blocks/my-content"
    class="plone-btn pat-plone-modal"
    data-pat-plone-modal="content: form.rapido-block">
        Open in a modal
</a>

    And then we just need to insert menu in our Plone page (using a Diazo rule).

    See Mockup modal documentation for more details about the options.

  • Load a Rapido block dynamically in the current page: we use the plone-contentloader to inject our Rapido block wherever we want. In our previous example, we would change the menu HTML to:

    <a href="#" class="pat-contentloader"
   data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;">
   Load content</a>

    It would replace the “Load content” link with our my-content block when we click on the link.

    Warning

    with plone-contentloader, the content selector is passed directly as an hash at the end of the URL.

    plone-contentloader also allows us to target a specific element for the injection (instead of replacing the link):

    <a href="#" class="pat-contentloader"
   data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;target:#here;">
   Load content</a>
<p id="here">Insert my content here.</p>

    By default, the injection is triggered by a click, but we can choose any DOM event (mouseover for instance), and we can even perform the injection immediately (using the immediate trigger):

    <a href="#" class="pat-contentloader"
   data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;trigger:immediate">
   Load content</a>