Product Personalization Tutorial - Select Box Form Element

Product Personalization Tutorial – Select Box Form Element

Select Box Form Element

To add the select element to the form you need to create a new node and add it to the <fields> node of the configuration file, with the <frontend_type>select</frontend_type>

and : <source_model>adminhtml/system_config_source_yesno</source_model>

To open a node for the new element, decide how you’d like that element to be called… Let’s just call it select_example.

1
2
3
<select_example>
*** the rest of the code would go here ***
</select_example>

 

After you’ve created a node for select_example, you can add it’s label and form element type. To have the selext_example form element select box, you would need to add the <frontend_type>select</frontend_type> in the selext_example node,like so:

1
2
3
4
<select_example>
  <frontend_type>select</frontend_type>
  <source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>

 

Assuming that you’d like to have the label explaining the user what he needs to enter, you’d want to add the label to the select_example node, like so:

1
2
3
4
5
<select_example>
  <label>Example of the select box </label>
  <frontend_type>select</frontend_type>
  <source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>

 

And optionally, if you’d like this form field to be required, you’d want to add the required option to the selext_example node like so:

1
2
3
4
5
6
<select_example>
  <label>Here's an example of the select box </label>
  <frontend_type>select</frontend_type>
  <source_model>adminhtml/system_config_source_yesno</source_model>
  <required>true</required>
</select_example>

 

And it would produce this:

08-select-box-example

The code in the example will produce the simplest Yes/No select box values. We found that this could be useful if you’d like to provide optional customization options to the users.

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *