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 itshref
attribute, and we just need to specifyform.rapido-block
as content selector (becauseplone-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 namedmenu
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 themenu
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 theimmediate
trigger):<a href="#" class="pat-contentloader" data-pat-contentloader="url:@@rapido/my-app/blocks/my-content#form.rapido-block;trigger:immediate"> Load content</a>