How to create a custom tile for Mosaic and edit a custome Plone template used by a Mosaic tile

everton137 · November 29, 2021, 5:52pm

Hi, I've found an old guide on How to Create HTML Tiles for Plone (Mosaic) (thank for the author and archive.org). I've followed the instructions and the following steps inside my Plone 5.2 theme:

Created a new tile:
- a template inside browser/templates/news_card.pt
- a class (NewsCardTile) and a schema (INewsCardTile) for the content type 'News Item' inside browser/tile.py
- registered inside browser/configure.zcml

I got stuck in the step to register the tile.

I tried to add inside profiles/default/registry.xml the following:

<record name="plone.app.tiles">
    <field type="plone.registry.field.List">
        <title>Tiles</title>
        <value_type type="plone.registry.field.TextLine" />
    </field>
    <value purge="false">
        <element>example.tiles.newscard</element>
    </value>
</record>

And reinstalled my theme. I don't know where to register the configuration for Mosaic:

<records prefix="plone.app.mosaic.app_tiles.contact_person"
 interface="plone.app.mosaic.interfaces.ITile">
 <value key="name">example.tiles.contactcard</value>
 <value key="label">Contact Card</value>
 <value key="category">advanced</value>
 <value key="tile_type">app</value>
 <value key="default_value"></value>
 <value key="read_only">false</value>
 <value key="settings">true</value>
 <value key="favorite">false</value>
 <value key="rich_text">false</value>
 <value key="weight">20</value>
 </records>

to see my tile while editing a page. May someone support on how to register this new tile?

What if I want to customize some of the custom plone templates, for instance, the plone.app.contenttypes.browser.templates.listing_summary.pt? Can I choose a template of mine for an existing tile, for instance, a new Display mode for a 'Content listing' tile (which is a collection):

jensens · November 29, 2021, 9:23pm

In lack of a manual, I think a good reference is existing code. GitHub - collective/collective.tiles.sliders: A collection of slider tiles for Mosaic. for instance - but also the code below.

The selection there lists all views registered in the Plone configuration registry under the key plone.app.standardtiles.listing_views. These are normal Plone views. You can write your own (this is documented well).

How do I know? Well, I didn't. I looked at the code. OK, I at least knew where to look, which is always the most difficult part:

github.com

plone/plone.app.standardtiles/blob/2ba83af92052eb3a3c28d8a4df071c4dfbc25cab/plone/app/standardtiles/contentlisting.py#L266


      
                  if not additional_classes:
                      return css_class
                  return " ".join([css_class, additional_classes])
          
          
          @provider(IVocabularyFactory)
          def availableListingViewsVocabulary(context):
              """Get available views for listing content as vocabulary"""
          
              registry = getUtility(IRegistry)
              listing_views = registry.get("plone.app.standardtiles.listing_views", {})
              if len(listing_views) == 0:
                  listing_views = {
                      "listing_view": u"Listing view",
                      "summary_view": u"Summary view",
                      "tabular_view": u"Tabular view",
                  }
              voc = []
              for key, label in sorted(listing_views.items(), key=itemgetter(1)):
                  voc.append(SimpleVocabulary.createTerm(key, key, label))
              return SimpleVocabulary(voc)

Looking further in the package I suspect a registry.xml in the default profile where this is defined:

github.com

plone/plone.app.standardtiles/blob/2ba83af92052eb3a3c28d8a4df071c4dfbc25cab/plone/app/standardtiles/profiles/default/registry.xml#L59-L70


      
          <record name="plone.app.standardtiles.listing_views">
            <field type="plone.registry.field.Dict">
              <title>Listing Views</title>
              <key_type type="plone.registry.field.TextLine" />
              <value_type type="plone.registry.field.TextLine" />
            </field>
            <value purge="false">
              <element key="listing_view">Listing view</element>
              <element key="summary_view">Summary view</element>
              <element key="tabular_view">Tabular view</element>
            </value>
          </record>

espenmn · November 30, 2021, 1:40pm

If you find it difficult, you could consider using theme fragments instead (it is MUCH easier).

About 'display mode': I did not figure it out 'how to do it properly' ( Collective.collectionfilter Mosaic: to do - #16 by espenmn ) so please give feedback if you get it to work.

mtrebron · November 30, 2021, 2:05pm

Here is a sample browser/configure.zcml

    <plone:tile
        name="tile_content_summary"
        title="Content Summary"
        description="A tile which previews a content object"
        add_permission="cmf.ModifyPortalContent"
        class=".tiles.ContentSummaryTile"
        for="*"
        permission="zope.Public"
        schema=".tiles.IContentSummaryTile"
        template="templates/tile_content_summary.pt"
        />

and the registration XML. Note there is no plone.app.tiles record

  <records prefix="plone.app.mosaic.app_tiles.custom_tiles_content_summary"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">tile_content_summary</value>
    <value key="label">Content Summary</value>
    <value key="category">advanced</value>
    <value key="tile_type">app</value>
    <value key="default_value" />
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">40</value>
  </records>

espenmn · November 30, 2021, 3:35pm

Is this for the 'display mode' ?

mtrebron · November 30, 2021, 3:50pm

It was just by way of example. Above tile configuration results in this:

everton137 · December 1, 2021, 1:01pm

Okay, by looking the registry.xml plone.app.standardtiles posted by @jensens, I could find my error on it, I need to wrap everything around <?xml version="1.0"?><registry></registry>, so now I made wrote a profile/default/registry.xml on my theme like this:

<?xml version="1.0"?>

<records prefix="plone.app.mosaic.app_tiles.news_card" interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">tiles.newscard</value>
    <value key="label">News Card</value>
    <value key="category">advanced</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">40</value>
</records>

<record name="plone.app.standardtiles.listing_views">
    <field type="plone.registry.field.Dict">
      <title>Listing Views</title>
      <key_type type="plone.registry.field.TextLine" />
      <value_type type="plone.registry.field.TextLine" />
    </field>
    <value purge="false">
      <element key="listing_view">Listing view</element>
      <element key="summary_view">Summary view</element>
      <element key="tabular_view">Tabular view 2</element>
    </value>
  </record>

So I can see now under the advanced category of Mosaic my News card tile and I can also see that I could change a display mode name for a 'Existing content' tile.

I could now the news card

and I can select a news:

But I have to debug the error that is appearing in the browser console:

Uncaught TypeError: can't access property 0, /<body[^>]>[^]</body>/im.exec(...) is null
parseBodyTag plone-compiled.js:502
redraw plone-compiled.js:5766
success plone-compiled.js:5173
success plone-compiled.js:3594
jQuery 6
b plone-compiled.js:3753
ajaxSubmit plone-compiled.js:3650
handleFormAction plone-compiled.js:5116
form plone-compiled.js:5066
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 6
render plone-compiled.js:5322
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 7
render plone-compiled.js:5319
jQuery 2
render plone-compiled.js:5310
render plone-compiled.js:5653
_show plone-compiled.js:5720
createHtmlModal plone-compiled.js:5494
show plone-compiled.js:5660
r plone-mosaic.js:3
success plone-mosaic.js:3
jQuery 6
exec plone-mosaic.js:3
mosaicExecAction plone-mosaic.js:3
jQuery 2
mosaicExecAction plone-mosaic.js:3
a plone-mosaic.js:2
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 6
triggerChange plone-editor-tools-compiled.js:2211
onSelect plone-editor-tools-compiled.js:3529
selectHighlighted plone-editor-tools-compiled.js:2941
init plone-editor-tools-compiled.js:1699
bind plone-editor-tools-compiled.js:1573
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
handle jQuery
plone-compiled.js:502:43
Source map error: Error: request failed with status 404
Resource URL: http://localhost:8080/Plone/++plone++mosaic/++unique++2021-11-29%2017%3A08%3A57.878780/plone-mosaic.js
Source Map URL: plone-mosaic.js.map

I will come back to work on this later, but I already appreciate the feedback from all @jensens @mtrebron @espenmn.

I know how to create a view (following this), but I would need to see how to add it to this list of views pointed out by @jensens we can find here: plone.app.standardtiles/plone/app/standardtiles/contentlisting.py at 2ba83af92052eb3a3c28d8a4df071c4dfbc25cab · plone/plone.app.standardtiles · GitHub

Just to complement, I've added the following on my browser/configure.zcml:

<include package="plone.app.mosaic" />

  <plone:tile
    name="tiles.newscard"
    title="Custom News Card"
    description="A tile which displays a news"
    add_permission="cmf.ModifyPortalContent"
    class=".tiles.NewsCardTile"
    for="*"
    permission="zope.Public"
    schema=".tiles.INewsCardTile"
    template="templates/news_tile.pt"
    />

And this is my broswer/tile.py just for testing

from plone.app.vocabularies.catalog import CatalogSource
from plone.supermodel import model
from zope import schema

class INewsCardTile(model.Schema):
   content_uid = schema.Choice(
   title=u"Select a news item object",  
   required=True,
   source=CatalogSource(portal_type=['News Item',]),
   )

from plone.app.standardtiles.existingcontent import ExistingContentTile

class NewsCardTile(ExistingContentTile):
 """ A tile for mosaic representing a news card """

My template prints just a <h1>Hellow world</h1>.

mtrebron · December 1, 2021, 2:05pm

I never managed to get this working with a catalogsource.

    content_uid = schema.Choice(
        title=_(u"Select an existing content"),
        required=True,
        vocabulary='plone.app.vocabularies.Catalog',
    )
    form.widget(
        'content_uid',
        RelatedItemsFieldWidget,
        vocabulary='plone.app.vocabularies.Catalog',
        pattern_options={
            'recentlyUsed': True,
            'folderTypes': ['Folder', 'LIF', 'LRF'],
            'selectableTypes' : ['News Item'],
        }
    )

yurj · December 1, 2021, 2:51pm

" The template Needs the <html><body> tags, and maybe even <!DOCTYPE>"

everton137 · December 1, 2021, 3:59pm

That made it work. Thank you, @yurj. Now I believe I can write my customized tile with my template.

I can write a more updated guide later how I did.

flipmcf · December 1, 2021, 5:50pm

You're welcome