Form - Options

Component Information

Component Title Form Options
Description Form Options component allows for the selection from pre-defined options in various formats.
Features
  • Checkboxes
  • Radio buttons
  • Drop down
  • Multi select drop down
Location /apps/ehi-core/aem65/components/form/options/v1/options
sling:resourceSuperType core/wcm/components/form/options/v2/options
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Form Options component uses the com.adobe.cq.wcm.core.components.models.form.Options Sling Model for its Use-object.

 

Client Libraries

The component provides a core.wcm.components.form.options.v2.editor editor client library category that includes CSS for dialog style adjustments. It is already included by its edit dialog.

BEM Description

BLOCK cmp-form-options
ELEMENT cmp-form-options__legend
ELEMENT cmp-form-options__field-label
ELEMENT cmp-form-options__field
MOD cmp-form-options__field--checkbox
MOD cmp-form-options__field--radio
ELEMENT cmp-form-options__field-description
ELEMENT cmp-form-options__label
ELEMENT cmp-form-options__drop-down-field
ELEMENT cmp-form-options__multi-drop-down-field
ELEMENT cmp-form-options__help-message

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Edit Dialog Properties

The following properties are written to JCR for this Form Options component and are expected to be available as Resource properties:

  1. ./type - defines the type of options form; possible values: checkbox, radio, drop-down, multi-drop-down
  2. ./title - defines the title of the form, which is used to describe its role
  3. ./name - defines the name of the field, which will be submitted with the form data
  4. ./source - defines the source of the options; possible values: local, list, datasource
  5. ./listPath - defines the path of a static list for the options, if the source property is set to list
  6. ./datasourceRT - defines the resource type of the datasource, if the source property is set to datasource
  7. ./items - defines the option items, if the source property is set to local
  8. ./helpMessage - defines a help message that can be rendered in the field as a hint for the user

Edit Dialog Visual

Component Demo

Form Options Title 

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        E524Z2
    
    3. 

  3. 
        jcr:title:
        Form Options Title
    
    4. 

  4. 
        jcr:lastModifiedBy:
        E524Z2
    
    5. 

  5. 
        source:
        local
    
    6. 

  6. 
        jcr:created:
        
    
    7. 

  7. 
        name:
        Form Options Name
    
    8. 

  8. 
        type:
        checkbox
    
    9. 

  9. 
        jcr:lastModified:
        
    
    10. 

  10. 
        requireSelectionDropDown:
        false
    
    11. 

  11. 
        sling:resourceType:
        ehi-core/aem65/components/form/options/v1/options
    
    12. 

  12. 
        requireSelectionMultiDropDown:
        false
    
    13. 




    
        

    
    
    

        

            
                Form Options Title
                





            
            
            
            
            

        

    




    


    

    


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.