Change Source Node
In this part, you will:
•Change the source node of the combo box
•Save the XPath expression of the image
Change source node of the combo box
Each page control can have a source node (or page source link), which is a node in one of the page sources. The link is made by dragging the page source node from the Page Sources Pane onto the control in the design. Essentially, a source node transfers data from the XML node to the control. But how the data in the XML node relates exactly to the control depends on the type of control it is. For example: A combo box selection updates its page source link—an XML node—and that value is reflected in the combo box display, whereas the source node of an image provides the URL of the image. When you hover over a control, the popup indicates how the source node will be used, for example, as an XML node to edit (for combo boxes), or as a data originator (for images).
We will change the source node of the combo box, from Product to Selection. Do this by dragging the Selection node from the Page Sources Pane onto the combo box control (see screenshot below).
We do this because we want to put the end user's combo box selection in the Selection element rather than the Product element. The reasons for wanting this are:
•There are multiple sibling Product elements in the file AltovaProducts.xml, each of which contains data we do not want to change.
•If the source node were Product, only the first Product element (Product[1]) would be updated with the combo box selection. This is undesirable.
•The best solution would be to store the end user selection in a separate element.
After changing the source node from Product to Selection, the combo box selection will update the Selection node—and not the Product node.
Change XPath expression of the image URL
Since the XML value of the combo box selection goes into the Selection node, this node must be used in the XPath expression that constructs the image URL. In the design, select the image, and click the XPath button of the Image URL property (in the Styles & Properties Pane). In the Specify File dialog that appears, modify the XPath expression so that Product is replaced by Selection. For example:
If you have: | concat(Product, '.bmp') |
Change it to: | concat(Selection, '.bmp') |
This XPath expression uses the end user's combo box selection (now stored in the Selection node) to generate the image file name. Since the image file and design file are in the same folder, the file name generated by the XPath expression is also the relative path to the image file from the location of the design file.