Suppose you have a resume application where you can add or edit a new resume for an employee, and you can edit the skills and the work history of the employee.
In the application it is possible to maintain multiple resumes, for example in two languages. First select an employee in the Employee select list and then select a resume. When no employee and no resume is selected, no button at all will be enabled. When an employee is selected but no resume, only the New Resume button will be enabled. When an employee and a resume are selected, all buttons will be enabled.
To implement this, we will create two dynamic actions: one for the employee select list and one for the resume select list. It is assumed that you already have a page with the items as displayed in the picture. So, two list items, one for the employees and one for the resumes. And four buttons, one for a new resume, one for editing a resume, one for editing skills and one for editing work history.
- In the Buttons section, click on the New Resume button
- In the Attributes section, enter "BT_EM-1" in the static id text field
- Click "Apply Changes"
- In the Buttons section, click on the Edit Resume button
- In the Attributes section, enter "BT_RM-1" in the static id text field
- Click "Apply Changes"
- In the Buttons section, click on the edit skills button
- In the Attributes section, enter "BT_RM-2" in the static id text field
- Click "Apply Changes"
- In the Buttons section, click on the edit work history button
- In the Attributes section, enter "BT_RM-3" in the static id text field
- Click "Apply Changes"
Instead of numbers, you could also use names that cover the button's function. So now we have four buttons with each having an id, which means that they can be found in the Document Object Model (DOM). Dynamic actions can also find the objects in the DOM and there are several ways to do so.
- In the dynamic actions section, click the "Add" icon
- Enter a name, for example "handle_employee_list"
- Click "Next"
- In the event select list, select "Change"
- In the selection type select list, select "Item"
- In the item text field, enter the name of the employee select list, you can use the icon next to the text field to find the exact name
- In the condition select list, select "Is not null"
- Click "Next"
- In the action select list, select "Enable"
- Make sure the fire on page load and the generate opposite false action checkboxes are checked
- Click "Next"
- In the selection type select list, select "jQuery selector"
- In the jQuery selector text field, enter "[id|='BT_EM']"
- In the dynamic actions section, click the "Add" button
- Enter a name, ie "handle_resume_list"
- Click "Next"
- In the event select list, select "Change"
- In the selection type select list, select "Item"
- In the item text field, enter the name of the resume select list, you can use the icon next to the text field to find the exact name
- In the condition select list, select "Is not null"
- Click "Next"
- In the action select list, select "Enable"
- Make sure the fire on page load and the generate opposite false action checkboxes are checked
- Click "Next"
- In the selection type select list, select "jQuery selector"
- In the jQuery selector text field, enter "[id|='BT_RM']"
- Click the create dynamic action button
We have two dynamic actions now. One is to enable/disable the new resume button and the other one is to enable/disable the edit resume, edit skills and edit work history buttons. Run the page and check if everything works. On entering the page for the first time, both select lists are empty and all buttons are disabled. Select an employee and check that the new resume button will be enabled, but the other
buttons not. Select a resume and check that also the other buttons will be enabled.
The big secret is off course the jQuery selector. The syntaxis tells that the selector should be between square brackets and starts with the name of the attribute. In this case we use the "id" attribute. After the pipe comes the matching string. BT_RM means that all objects are selected where the id attribute has the value 'BT_RM' or at least starts with 'BT_RM'. Everything in the id attribute before the hyphen (-) is matching, so BT_RM-1, BT_RM-2 and BT_RM-3 are all matching id's and thus will be affected when the resume select list changes. The SQL equivalent would be "where id like 'BT_RM%' ".
As you may know, there are two types of buttons in APEX. Buttons in region positions and buttons among items in the region. The recipe here is about buttons in region positions. In case you created buttons as items in the region, you don't see the static id text field. In that case you can prefix the name of the button with 'BT_RM-'. For such buttons, the name will appear in the id attribute.
For more information on jQuery selectors, go to http://api.jquery.com/category/selectors
