Tabular data entry eg Restaurant Menu - xmpie-users/uStore-js GitHub Wiki

If your InDesign document uses a table, it is possible to pass tabular data from the uStore customization step into the plan's table ADOR by using XML.

In this example, the document is a Restaurant menu, and the Dish, Description and Price are displayed in a table by loading XML data into a Table ADOR.

A HTML Generic dial in uStore makes it nicer/easier for the user to enter the menu items and prices; and formats the XML to pass to the plan.

Sample resources

You can download the document, data, and html generic code from this url: Resources ZIP file download. If your browser blocks this link, try this one in Box.com: Secondary download location

Setting up the sample

1. Upload the provided CPKG to your uProduce server
2. Upload the provided CSV to the datasource of the uploaded campaign
3. Proof and process the InDesign document.
4. Create a new Dynamic product in your uStore server
5. Select the menu.indd file from the account/campaign you created in uProduce
6. Turn off recipient list option and save the product
7. Enter customization step setup.
8. Copy all ADOR objects into the customization step
9. Swap to Variables and copy the MenuXML variable to the customization step
10. Edit the MenuXML Customization step
11. Set the Dial Type to HTML Generic
12. Copy the text in the "html generic menu.txt" file and paste into the "Markup" text area of the html generic dial setup
13. Set the Callback function to: htmlGenericPropertyTableCallback
14. Save the changes, put the product online and test.

How it works - Setting up your own example

1. Create your plan file in the usual way by linking to a recipient list (In the example, this was the CSV with restaurant name and address).
2. Create a new variable which will contain the MS Recordset XML for the Table ADOR. (In the example, this is the MenuXML variable.) Note that you cannot use any XML structure, it must be in Microsoft Recordset format.
3. Set this variable as a campaign dial that will get the XML from uStore.
4. Create a new JavaScript function named "decode" that returns a string value.
5. Add a new string parameter to the function called "str".
6. Edit the function and enter the following JavaScript:

var decodeSTR = decodeURIComponent(str);
return decodeURIComponent(decodeSTR);

7. Create a second variable that will contain the decoded XML. (In the example, this is the MenuXMLdecoded variable.)
8. Set the variable expression to use the decode function on your first variable:

decode(@{MenuXML})

9. Create your Table ADOR, and define field names that correspond to the field names defined in the MS Recordset XML. (In the example, this is the Menu table ADOR.)
10. Edit the Table ADOR and define the query to get the XML data from the second (decoded) variable.

• The first part of the expression is to tell uPlan where to get the data. Normally, this would be the name of a datasource defined in the plan, but in this case it should be: "@{EMBEDDED_XML}:"
• The next part of the expression is to select the data from the plan variable. (Adjust this for your variable name.)

@{EMBEDED_XML}: SELECT @{MenuXMLdecoded}

11. Save your plan and create a proofset for use in creating the InDesign document design.
12. Create the document and upload the design to uProduce.
13. Proof/process and add the document to uProduce as per usual.
14. Setup the product in uStore as described above.
15. Modify the HTML Generic dial Markup provided in the example. Specifically, you will need to change the field names and data types defined in the htmlGenericPropertyTableColumns array that starts on line 83 of the "html generic menu.txt" file:

    var htmlGenericPropertyTableColumns = [
        CreateColumn("Dish", "DI"),
        CreateColumn("Description", "DE"),
        CreateColumn("Price", "P"),
        /* other column types for reference since the menu demo only requires columnType.string which is the default:
        CreateColumn("Number", "Number", columnTypes.number),
        CreateColumn("DoB", "DOB", columnTypes.date),
        CreateColumn("Email", "E", columnTypes.email),
        CreateColumn("Tel.", "T", columnTypes.tel),
        CreateColumn("Fav. Color", "FC", columnTypes.color),*/
    ];

16. Save the customizations, put the product online and test.
17. After checking that the example works, you can modify the CSS in the HTML Generic Markup to suit your store skin. (By default it is suited to the "Skin XMPie Green" skin.) Also, you could modify the layout of the fields to be more relevant for your custom example.

uChart

The same example could be used to populate a Table ADOR that is used in uChart in the InDesign document making it possible for values entered in uStore to be used to create a dynamic chart or graph.

Acknowledgements

Thanks to the XMPie Professional Services Team for sharing the code example, and XMPie Training Team for creating the restaurant menu example used.