2. Getting started with options fields

Now that we created the left tab, the section button, and the default group with a test option field, we are going to explore how to create a custom options panel with groups and options.Before starting, let’s take a look at the following screenshot that shows you the module we created with Tabs, Sections, Groups, and Fields:have to add an images

options-fields

As we have seen, we need to set the groups and fields inside the <groups></groups> tags, and also set the real options of the module / theme options panel.

A group can contain several fields, as you can see in the example shown in the following code, where we create two fields, an input field, and a drop-down select Yes/No field: inside group tag

<mygroup translate="label" module="themeoptions">
	<label>My test group title</label>
	<frontend_type>text</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
		<my_input_field translate="label">
			<label>My Input Field: </label>
			<comment>This is a comment</comment>
			<frontend_type>text</frontend_type>
			<sort_order>20</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
		</my_input_field>
		<my_select_field translate="label">
			<label>My Dropdown: </label>
			<comment>Source model provider Magento's default Yes/No values</comment>
			<frontend_type>select</frontend_type>
			<sort_order>90</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
			<source_model>adminhtml/system_config_source_yesno</source_model>
		</my_select_field>
	</fields>
</mygroup>

Overviewing the System.xml fields
If you take a look at the code created previously, you can see that the fields are grouped inside the <fields></fields> tags, and each field includes many parts; let’s explain them.

The following code is an example of single input field:

<input_field translate="label">
		<label>My Input Field: </label>
		<comment>This is a comment</comment>
		<frontend_type>text</frontend_type>
		<sort_order>20</sort_order>
		<show_in_default>1</show_in_default>
		<show_in_website>1</show_in_website>
		<show_in_store>1</show_in_store>
	</input_field>

The elements used in the code are explained as follows:
• <input_field>: This is the unique node name of the option
• <Label>: This is the title of the field, displayed on the left
• <Comment>: This is useful to provide extra descriptions or information for the store manager
• <frontend_type>: This is the type of the option (you can see more details about this in the following lines)
• <sort_order>: This is used to order the fields inside the group
• <show_in…>: This is used to enable the option to make the field editable for each store/website scope

As said before, frontend_type is the type of the options that you can use; for example, an input text, a text area, and a drop-down list. All of them are defined in /lib/Varien/Data/Form/Element/ directory.
The following are the most used options:
• Input text field
• Textarea
• Dropdown with Yes/No values
• Dropdown with Enable/Disable values
• Dropdown with custom values
• Multiselect
• File upload
• Time
• Editable items
• Heading

As you can see, we have many types of fields, and this allows us to create a custom admin panel with all the options that you need. The more options you insert in your theme, the more possibilities you give the store manager to customize the theme without editing the code. Now, we will discuss the most used fields in detail.

Creating an input text:
You can use an input text for short text values, for example, a telephone number or a link.To create an input text option, you can use the following code: you have to be put this code system.xml file <fileds> tag

<text_field translate="label">
	<label>Text Field</label>
	<frontend_type>text</frontend_type>
	<sort_order>10</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</text_field>

Creating textarea:
You can use the Textarea for larger text values, such as a paragraph in which a company is talked about.

<textarea_field translate="label">
	<label>Textarea</label>
	<frontend_type>textarea</frontend_type>
	<sort_order>20</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</textarea_field>

Creating a dropdown with Yes/No values:
You can use the dropdown to enable or disable something.

<yes_no_field translate="label">
	<label>Dropdown Yes No</label>
	<frontend_type>select</frontend_type>
	<source_model>adminhtml/system_config_source_yesno</source_model>
	<sort_order>1</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</yes_no_field>

Creating a dropdown with Enable/Disable values:
Almost the same as the previous one, but instead of Yes and No, you will get Enable and Disable:

<enable_disable_field translate="label">
	<label>Dropdown Enable/Disable</label>
	<frontend_type>select</frontend_type>
	<sort_order>40</sort_order>
	<source_model>adminhtml/system_config_source_enabledisable </source_model>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</enable_disable_field>

Creating a dropdown with custom values:
The following is a custom dropdown with custom set of values generated by the source model:
The creation of a custom dropdown value is more complex than a Yes/No dropdown. But don’t worry, we will discuss this in the next topic.

Creating a File Upload option field
The File Upload option field allows us to choose a file to upload. You can set the destination folder too; in this example, the file will be saved in the [root]/media/bookstore directory:

<file translate="label comment">
	<label>File</label>
	<frontend_type>file</frontend_type>
	<backend_model>adminhtml/system_config_backend_file</backend_model>
	<upload_dir>media/bookstore</upload_dir>
	<sort_order>70</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</file>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s