Accessing and Displaying related (Relationship) in Volto Views

Development Plone 6 UI (Volto)
1

Is there a simple react to query and display related items to current Dexterity content type in Volto custom views.

Perhaps something similar to TAL: Content render method:

'<div tal:content="structure view/w/evil_mastermind/render" />'

Providing the classic plone implementation here for reference. Thanks!

2

I put together a gist that might help and I've highlighted the part of the code where the relatedItems are used:

I'm aware that the example uses the built in relatedItems and your question is about custom relations (e.g. a spouse relationship).
The essence is looking for what is returned by the rest api. In this case relatedItems is one of the fields returned.

3

Thank you @pigeonflight for the gist. Much appreciated.

Since custom dexterity type doesn't provide relatedItems by default. I think @tiberiuichim solution using custom siblings type might be the only solution.

4

It seems to provide a new GET endpoint that returns all objects that are in the same container as the current object. It uses a "trick" by depending on a special view called 'localtabs_view' to find all "siblings". I'm not sure that this is the same thing that you want.
It does provide a good pattern for how to create an endpoint in the backend. If your custom type has special relation fields you might need to create your own custom endpoint.

@pbauer thinks the restapi should provide a standard way to return relations here's the link to part of his talk where he discusses relations, the restapi and volto

If your content type is just using standard relatedItems it is possible to enable the relatedItems behavior under:
Site Setup > Content Types > "your content type" > Behaviors

image
image1273×4125 308 KB

5

@pbauer Am trying to understand relations api by reading plone.api/relation.rst at master · plone/plone.api · GitHub

Wonder if there is simple way to retrieve all relationship of the current document?

api.relation.get(target="current-document")

Am trying to expose all the relationship of current document so it could be rendering in volto with custom API Endpoint

6

There is no restapi-endpoint for relations. Adding a custom endpoint to get them should be straightforward.

incoming_relations = api.relations.get(target=obj, as_dict=True)
outgoing_relations = api.relations.get(source=obj, as_dict=True)

This will give you two dicts so you can arrange the results by relation-type (field, linkintegrity etc).

1 Like
7

Thanks @pbauer for integrating relations into plone api. The outgoing relations are always empty. Trying to figure out how to create a list sorted by relationship type

$ self.context
<Person at /Plone/persons/e-m>

 $ incoming_relations = api.relation.get(target=self.context, as_dict=True)
 $ incoming_relations
defaultdict(<class 'list'>,
            {'interestedParty': [<z3c.relationfield.relation.RelationValue object at 0x7fc852269dd0 oid 0x2aae in <Connection at 7fc858e36e50>>],
             'person': [<z3c.relationfield.relation.RelationValue object at 0x7fc85232a510 oid 0x2703 in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85232a900 oid 0x27e5 in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85232aa50 oid 0x2801 in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc8523e8f20 oid 0x2833 in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85226c270 oid 0x284f in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85226c3c0 oid 0x286b in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85226c510 oid 0x288e in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85226c660 oid 0x28a7 in <Connection at 7fc858e36e50>>,
                        <z3c.relationfield.relation.RelationValue object at 0x7fc85226c7b0 oid 0x28c4 in <Connection at 7fc858e36e50>>],
             'relationship_object': [<z3c.relationfield.relation.RelationValue object at 0x7fc852269c80 oid 0x2a83 in <Connection at 7fc858e36e50>>,
                                     <z3c.relationfield.relation.RelationValue object at 0x7fc852256430 oid 0x322c in <Connection at 7fc858e36e50>>]})

$ outgoing_relations = api.relation.get(source=self.context, as_dict=True)

$ outgoing_relations
defaultdict(<class 'list'>, {})
8

@arky, I am refering to your question on discord:
What is the correct way to access content.@components.customendpoint.items ?

I think it's essential to understand how Volto as a React app does access REST API endpoints.

Volto has several action / reducer pairs. A component that needs data from an endpoint does the following:

  1. It dispatches an action.
  2. It reads the data from the store.

That's the short answer.
The trainings show how to dispatch an action and how to read data from store.

Custom endpoints are rarely needed, because Volto has a powerful bunch of actions like searchContent, getVocabulary.

For custom endpoints, an action / reducer pair needs to be created. See how actions and reducer are done on 47. Volto Actions and Component State – Mastering Plone 6 Development — Plone Training 2022 documentation

If you are asking for relations, well, there is room to extend the API.

2 Likes