CODEWITHSUNDEEP
magnolia
Allwe
Allwe

Reputation: 481

How to create year picker dropdown

I wonder how to create year picker dropdown field in Magnolia.

Ideally it would list years from current year down to lets say 10 years in past.

I am new to magnolia and I can make Select field with hardcoded options but that is not great approach and I struggle how to create dynamic options. See:

name: year
fieldType: select
multiselect: false
label: Year
options:
  - name: 2020
    label: 2020
    selected: true
    value: 2020
  - name: 2019
    label: 2019
    selected: false
    value: 2019

Anyone got idea?

Upvotes: 0

Views: 327

Answers (2)

Syroezhkin
Syroezhkin

Reputation: 188

If you use latest version Magnolia 6.2, you can use datasource how Ducaz035 mentioned. See documentation here: https://documentation.magnolia-cms.com/display/DOCS62/Select+field

For previous version this way is not possible. You can only create your own field, register it and do whatever you want in the implementation. In your case, just override getOptions class.

public class YearSelectFieldFactory<D extends YearSelectFieldDefinition> extends SelectFieldFactory<D> {
    
    public YearSelectFieldFactory(D definition, Item relatedFieldItem, UiContext uiContext, I18NAuthoringSupport i18nAuthoringSupport) {
        super(definition, relatedFieldItem, uiContext, i18nAuthoringSupport);
    }

    public YearSelectFieldFactory(D definition, Item relatedFieldItem) {
        super(definition, relatedFieldItem);
    }

    @Override
    public List<SelectFieldOptionDefinition> getOptions() {
        List<SelectFieldOptionDefinition> res = new ArrayList<>();
        int currentYear = LocalDate.now().getYear();
        for (int i = currentYear - 10; i <= currentYear; i++) {
            SelectFieldOptionDefinition option = new SelectFieldOptionDefinition();
            option.setName(String.format("Year%s", i));
            option.setLabel(String.format("Year %s", i));
            option.setValue(String.valueOf(i));
            res.add(option);
        }
        res.get(0).setSelected(true);
        return res;
    }
}

YearSelectFieldDefinition just extends SelectFieldDefinition class. We need it to register our own field type.

To register the field add new fieldType to you module (or some other module, it doestn't matter). Here's a YAML definition for the field:

your-module-name:
  fieldTypes:
    yearSelectField: 
      definitionClass: com.example.fields.YearSelectFieldDefinition
      factoryClass: com.example.fields.YearSelectFieldFactory

Now you can use this field in your dialog definitions. Set the class for the field:

field:
  name: year
  class: com.example.fields.YearSelectFieldDefinition

Upvotes: 1

Ducaz035
Ducaz035

Reputation: 3132

You can attach a datasource to the field and let the datasource provide the months for you using Java.

An example from the documentation:

listSelect:
  label: Contacts
  $type: listSelectField
  datasource:
    $type: jcrDatasource
    workspace: contacts
    describeByProperty: firstName
    allowedNodeTypes:
      - mgnl:contact

And the link to documentation directly: https://documentation.magnolia-cms.com/display/DOCS62/Select+field

Upvotes: 0

Related Questions