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.
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: 100We 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.DrieVoorTwaalfUpdateTypeA 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.
Just a drop down with integers
integerRangeFieldfields:
myinteger:
$type: integerRangeField
min: 3
max: 11This a field to just show some 'calculated' value. Extend VirtualValueFieldDefinition and implement the abstract method. (look out with bytebuddy, access all fields via getters)
Text field which default value is a random UUID.
On default, it is readonly (but this can be overridden)
fields:
uuid:
$type: randomUUIDFieldAdd 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>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: richTextFieldCan 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.
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> |
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)
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> |
Checks whether the value is acceptable as an embed code. The contained HTML must be sane, and contain only https-references.
validators:
embedValidation:
$type: htmlEmbedValidatorvalidators:
embedValidation:
$type: linkFieldValidatorfields:
a_text_field:
description: 10 words max!
rows: 5
required: false
$type: richTextField
validators:
words:
parseHtml: true
$type: wordcountValidator
wordcount: 10validators:
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: urlField
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> |
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.
TODO, a very similar popup exists for the Thesaurus of Beeld & Geluid. Integration would be quite straight forward.
A dropdown with types from POMS. Based on the enum in media-domain
fields:
mediaType:
$type: pomsTypesField
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: channelFieldDropdown with all known Dutch broadcasters. Based on https://poms.omroep.nl/broadcasters/ (or, actually, a CSV version )
fields:
broadcasters:
$type: broadcastersField
twinBroadcasters:
$type: broadcastersTwinField