VPRO magnolia UI components
Introduction
These are a few magnolia UI components which we developed mostly years ago. Recently we migrated to Magnolia 6 and its new framework, and we had to migrate these components too. We took the occasion to isolate them to this github project. Hopefully it may benefit others, or otherwise it may at least facilitate use showing our code.
SNAPSHOTs are present in sonatype.
<dependency>
<groupId>nl.vpro</groupId>
<artifactId>magnolia-vpro-ui</artifactId>
<version>1.9</version>
</dependency>We’ll make a release when we’re ready, and the artifact will be available in maven central then.
Some components described below have extra dependencies, which will not come in automatically (they’re optional), which is indicated in notes then.
Fields
Color picker
Differences with: https://github.com/magnolia-community/color-picker-field
-
stores as string,
String Color#getCSS, rather thanint Color#getRGB -
can show text field too (editable)
-
more configurable
-
text: <NOT|BEFORE|AFTER> -
cssInPopup: <true: false> -
format: <HASH|RGB|RGBA> -
pickerWidth: 100 -
pickerHeight: 100
-
color:
$type: cssColorPickerField
text: AFTER
defaultValue: '#000'
pickerWidth: 100
pickerHeight: 100Enum field
We provide a simpler version to use enums in a combobox.
type:
$type: enumField
enum: nl.vpro.domain.koos.KoosTipType
multiselect: <true|false>
twinselect: <true|false>
emptyValue: READJust specify as field $type enumField, and the name of the enum.
The enum is presented on default via its toString method, unless it implements nl.vpro.i18n.Displayable.
If both of these are not desired (e.g. because you can’t change the implementation of the enum), then you can set a Converter in the field definition or extend nl.vpro.magnolia.ui.enumfield.EnumFieldDefinition and overwrite #convertToPresentation
To be used in conjuction with this, there is also a '$type: enumColumn'
type:
$type: enumColumn
enum: nl.vpro.domain.drievoortwaalf.DrieVoorTwaalfUpdateTypeCountry and region field
A dropdown with countries of the world
country:
$type: countryField
useIcons: trueCountries are displayed in current Locale, and stored as ISO 639 country code.
Actually it is a specialization of $type: regionField, which could also be used for other type of regions like country subdivisions or continents.
Integer range field
Just a drop down with integers
integerRangeFieldfields:
myinteger:
$type: integerRangeField
min: 3
max: 11Virtual value field
This a field to just show some 'calculated' value. Extend VirtualValueFieldDefinition and implement the abstract method. (look out with bytebuddy, access all fields via getters)
Random UUID
Text field which default value is a random UUID.
On default, it is readonly (but this can be overridden)
fields:
uuid:
$type: randomUUIDFieldDAM Link Field with edit option
Add to the default damLinkField an 'edit' button, to jump to the asset app and edit the image after selection.
fields:
image:
$type: damLinkFieldWithEditIt also allows text input, and therefore, implicitely a link validator is added so that you can only enter valid dam links.
<dependency>
<groupId>info.magnolia.dam</groupId>
<artifactId>magnolia-dam-app</artifactId>
<version>3.0.14</version>
</dependency>Proof of Provenance Field
To enable signing a text field using irma ('(I Reveal My Attributes)') you can use a field with type 'proofOfProvenanceField'
fields:
signedText:
description: A text field with Proof Of Provenance
attribute: pbdf.sidn-pbdf.email.email
$type: proofOfProvenanceFieldThis will make a plain text field 'signedText', but it will present an extra text area which contains the 'signature', which can be filled manually, or via a button, which uses the field’s value to create a signature.
You can also specify the textfield definition it will use. It must be a fielddefinition for a field of type AbstractField<String> it will use the value from that field to sign.
fields:
signedRichText:
description: A text field with Proof Of Provenance
attribute: pbdf.sidn-pbdf.email.email
$type: proofOfProvenanceField
field:
$type: richTextFieldActions
Auto JCR Name
Can be used as a commit action. To fill in jcrName, based on another property
detail:
class: info.magnolia.ui.contentapp.detail.DetailDescriptor
actions:
commit:
$type: autoJcrCommitAction
propertyName: name # default is 'title'Columns
Referred column
Can be used as a column. Like so:
referredColumn- name: author
$type: referredColumn
workspace: persons
forType:
- mgnl:vijverTip
otherProperty: nameThis can be used in workbench view to display a field in another node. In this case a column author contains a reference to a node in the persons workspace, and rather then showing the uuid of the node, the name property of the referenced node is shown.
Unhtml column
Strip HTML markup from the value, so that it can more nicely be presented in a column
description: $type: unhtmlColumn
|
Note
|
For this to work you need <dependency>
<groupId>nl.vpro.shared</groupId>
<artifactId>vpro-shared-util</artifactId>
<version>3.5.4</version>
</dependency> |
Date only column
Just shows the date part of a datetime field.
description: $type: dateonlyColumn
CheckBox for searching
This is to be used as filterComponent in a view.
columns:
highlighted:
defaultValue: false
type: java.lang.Boolean
filterComponent:
$type: checkBoxSearchFieldIt’ll show a checkbox. It will only filter if checked. (Or with negate: true, only when not checked)
Validators
Bean validation
The idea is to use the javax.validation framework
validators:
urlValidation:
$type: beanValidator
bean: nl.vpro.koos.KoosTip
property: linkThis way the validation of given bean property is 'borrowed', which is for example in this case exactly what we want, because the value will end up there eventually.
|
Note
|
For this to work you need a validator implementation. Dependency on validator implementation
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.2.1.Final</version>
</dependency> |
HTML embed validator
Checks whether the value is acceptable as an embed code. The contained HTML must be sane, and contain only https-references.
validators:
embedValidation:
$type: htmlEmbedValidatorLink validator
validators:
embedValidation:
$type: linkFieldValidatorWord count validator
fields:
a_text_field:
description: 10 words max!
rows: 5
required: false
$type: richTextField
validators:
words:
parseHtml: true
$type: wordcountValidator
wordcount: 10URL validator
validators:
url:
$type: urlValidator|
Note
|
For this to work you need Dependency on validator implementation
<dependency>
<groupId>nl.vpro.shared</groupId>
<artifactId>vpro-shared-validation</artifactId>
<version>3.5.4</version>
</dependency>
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.2.1.Final</version>
</dependency> |
The URL must parse, have a scheme, and the host must have at least two parts.
It is also available implicitly on 'urlField':
fields:
urlField:
descripton: Also an URL, but the validator is implicit
$type: urlFieldPOMS extensions
POMS is a CMS for media meta data, which is in use at dutch public brothcasters (a.o. VPRO).
|
Note
|
For these to work you need <dependency>
<groupId>nl.vpro.magnolia</groupId>
<artifactId>magnolia-vpro-ui-poms</artifactId>
<version>1.9</version>
</dependency> |
Fields
Media chooser
Shows a text field and a button. If you click on the button the POMS 'Media Selector' will be popped up, and you can select a media object. You’ll need a poms-account for this.
fields:
media:
$type: mediaChooserField
mediaType:
- BROADCAST
- SERIESA property poms poms.baseUrl=https://poms.omroep.nl/ is used and can be overriden to point to test or acceptance environment.
Thesaurus
TODO, a very similar popup exists for the Thesaurus of Beeld & Geluid. Integration would be quite straight forward.
Media types
A dropdown with types from POMS. Based on the enum in media-domain
fields:
mediaType:
$type: pomsTypesFieldChannels
Drop down with all known channels. Channels that at some point where visible in the Netherlands. Based on the enum in media-domain.
fields:
channel:
$type: channelFieldBroadcasters
Dropdown with all known Dutch broadcasters. Based on https://poms.omroep.nl/broadcasters/ (or, actually, a CSV version )
fields:
broadcasters:
$type: broadcastersField
twinBroadcasters:
$type: broadcastersTwinFieldVersions
| Version | Java | magnolia | shared | poms | Remarks |
|---|---|---|---|---|---|
1.7 |
8 |
6.2.22 |
2.33 |
6.0 |
|
1.8 |
11 |
6.2.28 |
3.0 |
7.1 |
|
1.9 |
11 |
6.2.38 |
3.5 |
7.6 |
|
1.10 |
17 |
6.2.39 |
4.0 |
7.7 |





