Component Shadow Input Form

Plone Support
, ,
1

Hi,

I am using Volto with Plone and wondering if it is possible to shadow the input form for a component.

I have a Content Type defined in plone and when I go to add the content type it looks like this -

image
image1145×498 17.7 KB

I would like to be able to either customize this or replace it altogether with a new component due to some requirements where we need to do some fairly custom things on the front end just for this specific form

I was looking at component shadowing but wasn't sure what component I would even need to shadow.

Is this possible?

Thanks!

2

Here's 2 key links:

Notice that getWidgetByFieldId is the first one tried, which means that you can easily register a config.widgets.id.sponsoring_level = SponsoringLevelWidget.

3

Thanks tiberiuichim that looks like it did the trick!

image
image1127×469 19.5 KB

Do you happen to know if there is any documentation around how a custom Widget like this needs to be build so Plone gets all the information that it's expecting?

4

I don't know, what's the internal data model for that field? You can send anything to the Plone backend as the value of that field, it's up to Plone's Dexterity to accept that.

I think the Textarea Widget is one of the simplest examples. Basically, the widget "protocol" is just to call back the onChange prop with anything it desires as a value. If you're just starting with React, I can give you one general rule when writing widgets: most of the times they don't need to have an internal state for their value. Just "pass it up" with onChange and get it back as value.

If your internal data model is complex, you can use a JSONField as the field type. See @ksuess's excelent chapter on how to create a custom widget for a field that saves it's data as json. If you have an updated plone.schema (1.3), you can directly set the Volto widget name in the Plone schema (and then register as config.widgets.widget.sponsoring_level.

5

That field specifically is setup like this -

primary_author = schema.Choice(
        title=_(u'Primary Author'),
        vocabulary=get_firm_bios_users(),
        required=True
    )

I can't imagine that would be too complex, looking at all those widgets I'm guessing I could base it off this Select widget?

6

Indeed, you can base it off Select. If it's only a matter of having the proper choices in that Select field, I think you can pass a vocabulary url to the Select widget and it will fetch the options through a @vocabulary endpoint.

Here's some code that can convince Volto to read the select values from a vocabulary URL.

from plone.autoform import directives
...
primary_author = schema.TextLine(title=_(u"Primary author"), required=False)
directives.widget( "primary_author", AjaxSelectFieldWidget, vocabulary="primary_authors")

I'm assuming you already have the vocabulary populated. If you need "creatable options in the select", it may get tricky. I have this for you: volto-freshwater/SingleTokenWidget.jsx at master · eea/volto-freshwater · GitHub