You have previously seen how you can set out buttons/links using the fm:action-out functionality. This is very basic and does not allow buttons/links to be displayed in amongst standard fm:set-out form or list displays. This is where the Phantom Elements come in.
Phantom Elements are specified in the schema part of your FOX module. They are simply placeholders for buttons or links. Phantom Elements are set out using the same size and positioning attributes as for other list/form display elements.
The Phantom Element is the only case where fm:set-out displays something when no data exists in the DOM (i.e. element node). As no data exists for Phantom Elements, the fm:init and fm:validate commands ignore them also - it’s as if they are not defined in the Schema.
SYNTAX & EXAMPLE
You must library in the module LAYOUT1 in order to use phantoms. To do that, you will need to make sure that your FOX module contains the following code:
<fm:library-list>
<fm:library>LAYOUT1</fm:library>
</fm:library-list>
The definition in the schema of a typical phantom element can look as follows:
This phantom element is called “DUMMY_REMOVE”. It is set-out as a link and when you click it, a confirmation box comes up. If you accept, it runs the action “action-remove-me”. On the screen this looks as follows:
CONCEPTS
The :{action} Context
When an action is run from a phantom element, the :{action} context follows the “Evaluate Context” rule (see chapter 12 for more). Thix context exists only after the action is fired, therefore, you wont be able to use it as part of a confirm alert.
Therefore in a list you can use the :{action} context which points to the collection/record containing the phantom element (previous complex type element unless it itself is a complex type).
In the following example the :{action} context will point to the ORGANISATION_NAME element. You can therefore refer to the text content of the STARTDATE element using XPath:
:{action}/STARTDATE/text()
Similarly the ORGANISATION_NAME (collection/record) can be targeted using XPath:
:{action}
The following code for an action could remove just the date (using the :{action} context) for the given organisation name after the user has confirmed the action.
<fm:action name="action-remove-startdate" fox:confirm="Are you sure you want to remove this date?" fox:run=".">
<fm:do>
<fm:remove match=":{action}/STARTDATE/text()"/>
</fm:do>
</fm:action>
EXERCISES
Please use your XX_ORDERMODULE (where XX are your initials) file for the following exercises.
Exercise 1
Create a phantom element within ORDER_ITEM named “phantom-remove”. It should be a link that reads “Remove” and when clicked, a confirmation box should pop up (see above example) asking if you really want to remove that product. If the user confirms, the product should be removed from the list.