{"id":23498195,"url":"https://github.com/vpro/magnolia-vpro-ui","last_synced_at":"2025-09-12T08:34:13.704Z","repository":{"id":37406867,"uuid":"445574492","full_name":"vpro/magnolia-vpro-ui","owner":"vpro","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-25T20:57:58.000Z","size":2258,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-02-16T15:17:31.760Z","etag":null,"topics":["irma","magnolia","magnolia-cms","magnolia-ui"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vpro.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-07T15:55:19.000Z","updated_at":"2022-07-08T15:23:34.000Z","dependencies_parsed_at":"2023-02-09T15:31:38.246Z","dependency_job_id":"6b9b0b92-e34e-4e30-9444-3c64f0811def","html_url":"https://github.com/vpro/magnolia-vpro-ui","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpro%2Fmagnolia-vpro-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpro%2Fmagnolia-vpro-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpro%2Fmagnolia-vpro-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpro%2Fmagnolia-vpro-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vpro","download_url":"https://codeload.github.com/vpro/magnolia-vpro-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250338969,"owners_count":21414282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["irma","magnolia","magnolia-cms","magnolia-ui"],"created_at":"2024-12-25T05:28:59.364Z","updated_at":"2025-04-22T23:25:07.353Z","avatar_url":"https://github.com/vpro.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"= VPRO magnolia UI components\n:toc:\n:toclevels: 5\n\n:VERSION: 1.9\n:VPRO_SHARED_VERSION: 3.5.4\n\nimage:https://github.com/vpro/magnolia-vpro-ui/workflows/build/badge.svg?[Build Status,link=https://github.com/vpro/magnolia-vpro-ui/actions/workflows/maven.yml]\nimage:https://img.shields.io/maven-central/v/nl.vpro.magnolia/magnolia-vpro-ui.svg[MavenCentral,link=https://search.maven.org/search?q=g:%22nl.vpro.magnolia%22]\n// image:http://www.javadoc.io/badge/nl.vpro.magnolia/magnolia-vpro-ui/.svg?color=blue[javadoc,link=http://www.javadoc.io/doc/nl.vpro.magnolia/magnolia-vpro-ui/]\n// image:https://codecov.io/gh/vpro/magnolia-vpro-ui/branch/main/graph/badge.svg[codecov,link=https://codecov.io/gh/vpro/magnolia-vpro-ui]\nimage:https://img.shields.io/nexus/s/https/oss.sonatype.org/nl.vpro.magnolia/magnolia-vpro-ui.svg[snapshots,link=https://oss.sonatype.org/content/repositories/snapshots/nl/vpro/magnolia/magnolia-vpro-ui/]\n\n== Introduction\n\nThese 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\nto migrate these components too. We took the occasion to isolate them to this github project. Hopefully it may benefit others, or otherwise it\nmay at least facilitate use showing our code.\n\n\nSNAPSHOTs are present in sonatype.\n\n.pom.xml dependency\n[source, xml, subs='attributes,verbatim']\n----\n \u003cdependency\u003e\n  \u003cgroupId\u003enl.vpro\u003c/groupId\u003e\n  \u003cartifactId\u003emagnolia-vpro-ui\u003c/artifactId\u003e\n  \u003cversion\u003e{VERSION}\u003c/version\u003e\n \u003c/dependency\u003e\n----\nWe'll make a release when we're ready, and the artifact will be available in maven central then.\n\nSome components described below have extra dependencies, which will not come in automatically (they're optional), which is indicated in notes then.\n\n\n== Fields\n=== Color picker [[color_picker]]\n\nDifferences with: https://github.com/magnolia-community/color-picker-field\n\n- stores as string, `String Color#getCSS`, rather than `int Color#getRGB`\n- can show text field too (editable)\n- more configurable\n** `text: \u003cNOT|BEFORE|AFTER\u003e`\n** `cssInPopup: \u003ctrue: false\u003e`\n** `format: \u003cHASH|RGB|RGBA\u003e`\n** `pickerWidth: 100`\n** `pickerHeight: 100`\n\n\n.Example usage of color picker field in a form (described in yaml)\n[source, yaml]\n----\n color:\n   $type: cssColorPickerField\n   text: AFTER\n   defaultValue: '#000'\n   pickerWidth: 100\n   pickerHeight: 100\n\n----\n\n=== Enum field [[enum_field]]\n\nWe provide a simpler version to use enums in a combobox.\n\n.Example usage of enumField\n[source, yaml]\n----\n type:\n    $type: enumField\n    enum: nl.vpro.domain.koos.KoosTipType\n    multiselect: \u003ctrue|false\u003e\n    twinselect: \u003ctrue|false\u003e\n    emptyValue: READ\n----\n\nJust specify as field $type `enumField`, and the name of the enum.\n\nThe enum is presented on default via its `toString` method, unless it implements `nl.vpro.i18n.Displayable`.\n\n\nIf 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`\n\n\nTo be used in conjuction with this, there is also a '$type: enumColumn'\n[source, yaml]\n----\ntype:\n  $type: enumColumn\n  enum:  nl.vpro.domain.drievoortwaalf.DrieVoorTwaalfUpdateType\n----\n\n\n===  Country and region field [[country_field]]\n\nA dropdown with countries of the world\n[source, yaml]\n----\n country:\n   $type: countryField\n   useIcons: true\n----\nCountries are displayed in current `Locale`, and stored as ISO 639 country code.\n\nActually it is a specialization of `$type: regionField`, which could also be used for other type of regions like country subdivisions or continents.\n\n[#countries]\n.Example of countries drop down in use\nimage::{docdir}/doc/countries.png[Countries drop down]\n\n=== Integer range field [[integerrange_field]]\n\nJust a drop down with integers\n\n.Example of `integerRangeField`\n[source, yaml]\n----\nfields:\n  myinteger:\n    $type: integerRangeField\n    min: 3\n    max: 11\n----\n\n=== Virtual value field\n\nThis a field to just show some 'calculated' value. Extend `VirtualValueFieldDefinition` and implement the abstract method. (look out with bytebuddy, access all fields via getters)\n\n=== Random UUID\n\nText field which default value is a random UUID.\n\nOn default, it is readonly (but this can be overridden)\n\n[source, yaml]\n----\nfields:\n  uuid:\n    $type: randomUUIDField\n----\n\n=== DAM Link Field with edit option\n\n\nAdd to the default `damLinkField` an 'edit' button, to jump to the asset app and edit the image after selection.\n[source, yaml]\n----\nfields:\n  image:\n    $type: damLinkFieldWithEdit\n----\n\nIt also allows text input, and therefore, implicitely a link validator is added so that you can only enter valid dam links.\n\nimage::{docdir}/doc/dam-selector-with-edit.png[Dam Selector in action]\n\n.pom.xml dependency\n[source, xml, subs='attributes,verbatim']\n----\n  \u003cdependency\u003e\n    \u003cgroupId\u003einfo.magnolia.dam\u003c/groupId\u003e\n    \u003cartifactId\u003emagnolia-dam-app\u003c/artifactId\u003e\n    \u003cversion\u003e3.0.14\u003c/version\u003e\n  \u003c/dependency\u003e\n----\n\n=== Proof of Provenance Field\n\nTo enable signing a text field using https://waag.org/en/project/proof-provenance/[irma] ('(I Reveal My Attributes)') you can use a field with type 'proofOfProvenanceField'\n\n[source, yaml]\n----\n  fields:\n    signedText:\n      description: A text field with Proof Of Provenance\n      attribute: pbdf.sidn-pbdf.email.email\n      $type: proofOfProvenanceField\n----\n\nThis 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.\n\nimage::{docdir}/doc/irma.png[Exaple of IRMA Popup]\n\nYou can also specify the textfield definition it will use. It must be a fielddefinition for a field of type `AbstractField\u003cString\u003e` it will use the value from that field to sign.\n[source, yaml]\n----\nfields:\n   signedRichText:\n      description: A text field with Proof Of Provenance\n      attribute: pbdf.sidn-pbdf.email.email\n      $type: proofOfProvenanceField\n      field:\n        $type: richTextField\n----\n\n\n== Actions\n\n=== Auto JCR Name\n\nCan be used as a commit action. To fill in jcrName, based on another property\n\n[source, yaml]\n----\n detail:\n    class: info.magnolia.ui.contentapp.detail.DetailDescriptor\n    actions:\n      commit:\n        $type: autoJcrCommitAction\n        propertyName: name # default is 'title'\n----\n\n== Columns\n=== Referred column [[referred_column]]\n\nCan be used as a column. Like so:\n\n.Example of `referredColumn`\n[source, yaml]\n----\n- name: author\n  $type: referredColumn\n  workspace: persons\n  forType:\n    - mgnl:vijverTip\n  otherProperty: name\n----\n\nThis 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.\n\n\n=== Unhtml column\n\nStrip HTML markup from the value, so that it can more nicely be presented in a column\n[souce, yaml]\n----\n description:\n   $type: unhtmlColumn\n----\n\n[NOTE]\n====\nFor this to work you need\n[source, xml, subs='attributes,verbatim']\n----\n\u003cdependency\u003e\n  \u003cgroupId\u003enl.vpro.shared\u003c/groupId\u003e\n  \u003cartifactId\u003evpro-shared-util\u003c/artifactId\u003e\n  \u003cversion\u003e{VPRO_SHARED_VERSION}\u003c/version\u003e\n\u003c/dependency\u003e\n----\n====\n\n=== Date only column\n\nJust shows the date part of a datetime field.\n\n[souce, yaml]\n----\n description:\n   $type: dateonlyColumn\n----\n\n=== CheckBox for searching\n\nThis is to be used as `filterComponent` in a view.\n\n[source, yaml]\n----\ncolumns:\n  highlighted:\n    defaultValue: false\n    type: java.lang.Boolean\n    filterComponent:\n      $type: checkBoxSearchField\n----\n\nIt'll show a checkbox. It will only filter if checked. (Or with `negate: true`, only when not checked)\n\n\n[#searchablecheckbox]\n.Example of checkBoxSearchField in  use\nimage::{docdir}/doc/searchablecheckbox.png[searchablecheckbox]\n\n\n== Validators\n\n=== Bean validation [[bean_validation]]\n\nThe idea is to use the link:https://beanvalidation.org/2.0/[`javax.validation`] framework\n\n.Example usage of beanValidator validator.\n[source, yaml]\n----\nvalidators:\n   urlValidation:\n      $type: beanValidator\n      bean: nl.vpro.koos.KoosTip\n      property: link\n----\n\nThis way the validation of given bean property is 'borrowed', which is for example in this case exactly what we want, because the value will\nend up there eventually.\n\n[NOTE]\n====\nFor this to work you need a validator implementation.\n\n.Dependency on validator implementation\n[source, xml]\n----\n\u003cdependency\u003e\n  \u003cgroupId\u003eorg.hibernate.validator\u003c/groupId\u003e\n  \u003cartifactId\u003ehibernate-validator\u003c/artifactId\u003e\n  \u003cversion\u003e6.2.1.Final\u003c/version\u003e\n\u003c/dependency\u003e\n----\n====\n\n=== HTML embed validator\n\nChecks whether the value is acceptable as an embed code. The contained HTML must be sane, and contain only https-references.\n\n\n.Example usage of htmlEmbed validator.\n[source, yaml]\n----\nvalidators:\n   embedValidation:\n      $type: htmlEmbedValidator\n----\n\n\n=== Link validator\n\n.Example usage of linkValidator\n[source, yaml]\n----\nvalidators:\n   embedValidation:\n      $type: linkFieldValidator\n----\n\n\n=== Word count validator\n\n[source, yaml]\n----\nfields:\n  a_text_field:\n      description: 10 words max!\n      rows: 5\n      required: false\n      $type: richTextField\n      validators:\n        words:\n          parseHtml: true\n          $type: wordcountValidator\n          wordcount: 10\n\n----\n\n=== URL validator\n\n[source, yaml]\n----\nvalidators:\n   url:\n      $type: urlValidator\n----\n\n[NOTE]\n====\nFor this to work you need\n\n.Dependency on validator implementation\n[source, xml, subs='attributes,verbatim']\n----\n\u003cdependency\u003e\n  \u003cgroupId\u003enl.vpro.shared\u003c/groupId\u003e\n  \u003cartifactId\u003evpro-shared-validation\u003c/artifactId\u003e\n  \u003cversion\u003e{VPRO_SHARED_VERSION}\u003c/version\u003e\n\u003c/dependency\u003e\n\u003cdependency\u003e\n  \u003cgroupId\u003eorg.hibernate.validator\u003c/groupId\u003e\n  \u003cartifactId\u003ehibernate-validator\u003c/artifactId\u003e\n  \u003cversion\u003e6.2.1.Final\u003c/version\u003e\n\u003c/dependency\u003e\n----\n====\n\nThe URL must parse, have a scheme, and the host must have at least two parts.\n\nIt is also available implicitly on 'urlField':\n\n[source, yaml]\n----\nfields:\n   urlField:\n     descripton: Also an URL, but the validator is implicit\n     $type: urlField\n----\n\n\n== POMS extensions\n\nimage:https://img.shields.io/nexus/s/https/oss.sonatype.org/nl.vpro.magnolia/magnolia-vpro-ui-poms.svg[snapshots,link=https://oss.sonatype.org/content/repositories/snapshots/nl/vpro/magnolia/magnolia-vpro-ui-poms/]\n\nPOMS is a CMS for media meta data, which  is in use at dutch public brothcasters (a.o. VPRO).\n\n[NOTE]\n====\nFor these to work you need\n\n[source, xml, subs='attributes,verbatim']\n----\n\u003cdependency\u003e\n   \u003cgroupId\u003enl.vpro.magnolia\u003c/groupId\u003e\n   \u003cartifactId\u003emagnolia-vpro-ui-poms\u003c/artifactId\u003e\n   \u003cversion\u003e{VERSION}\u003c/version\u003e\n\u003c/dependency\u003e\n----\n====\n\n\n=== Fields\n\n==== Media chooser\n\nShows 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.\n\n[source, yaml]\n----\nfields:\n  media:\n    $type: mediaChooserField\n    mediaType:\n      - BROADCAST\n      - SERIES\n----\n\nA property poms `poms.baseUrl=https://poms.omroep.nl/` is used and can be overriden to point to test or acceptance environment.\n\n[#poms-selector]\n.Example of poms selector in use\n[link=https://poms.omroep.nl/CMSSelector/example]\nimage::{docdir}/doc/poms-selector.png[pomsselector]\n\n\n==== Thesaurus\n\nTODO, a very similar popup exists for the Thesaurus of  Beeld \u0026 Geluid. Integration would be quite straight forward.\n\n\n==== Media types\n\nA dropdown with types from POMS. Based on the enum in `media-domain`\n\n[source, yaml]\n----\nfields:\n  mediaType:\n    $type: pomsTypesField\n----\n\n\n\n==== Age ratings\n\nlink:https://www.kijkwijzer.nl/[NICAM] age ratings\n\n[source, yaml]\n----\nfields:\n  ageRating:\n    $type: ageRatingField\n----\n\n[#ageratings]\n.Example of age ratings in use\nimage::{docdir}/doc/ageratings.png[ageratings drop down]\n\n==== Content ratings\n\nlink:https://www.kijkwijzer.nl/[NICAM] content ratings\n\n[source, yaml]\n----\nfields:\n  contentRating:\n    $type: contentRatingsField\n----\n\n==== Channels\n\nDrop down with all known channels. Channels that at some point where visible in the Netherlands. Based on the enum in `media-domain`.\n\n[source, yaml]\n----\nfields:\n   channel:\n      $type: channelField\n----\n\n\n==== Broadcasters\n\nDropdown with all known Dutch broadcasters. Based on https://poms.omroep.nl/broadcasters/ (or, actually, a link:https://poms.omroep.nl/broadcasters/CSV[CSV] version )\n\n[source, yaml]\n----\nfields:\n   broadcasters:\n      $type: broadcastersField\n   twinBroadcasters:\n      $type: broadcastersTwinField\n----\n\n== Versions\n\n\n|===\n|Version | Java  | magnolia | shared | poms | Remarks\n\n| 1.7 | 8 |  6.2.22     | 2.33 | 6.0 |\n| 1.8 | 11 |  6.2.28     | 3.0 | 7.1 |\n| 1.9 | 11 |  6.2.38     | 3.5 | 7.6 |\n| 1.10   | 17 | 6.2.39 | 4.0 | 7.7 |\n|===\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpro%2Fmagnolia-vpro-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvpro%2Fmagnolia-vpro-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpro%2Fmagnolia-vpro-ui/lists"}