Load CSV File into XML Table

Using XMLHttpRequest() to configure entire ToolBook pages.

Load CSV File into XML Table

Postby Clifton » Thu Apr 12, 2018 9:13 pm

IMPORTANT: This task requires PowerPac v14.103.2+
Also note that PowerPac v15 (latest release) includes better handling of table data sent from a server. Please see the XML table template for specific instructions on configuring server data that your application will understand and use.
Get the latest release here.

HOW TO DO THIS:
  1. Create a simple CSV file with 2 columns and 3 rows. The first row will be assumed to represent a header row.
  2. Create a single page, PowerPac-enabled book.
  3. Create a button to act our trigger (see page layout below) to intiate the loading of the CSV. Name the button "LoadData"
  4. Create 2 fields as shown below to act as containers for our XML table. Name the header field "myTableHdr" and the data field "myTableData". Position/stack them as shown and then group them. Name the group "my_csv_data".
      Image 1.png
      ToolBook authoring page
      Image 1.png (38.95 KiB) Viewed 7464 times
  5. Create a CSS table template file by opening the one included with the PowerPac and saving it to the same folder as your newly created book. Name the CSS file "myTable.css".
      Image 2.png
      Create CSS table template
      Image 2.png (23.6 KiB) Viewed 7464 times
  6. Create a NEW XML table document using the menu system shown above. Modify the file to look like the XML file below. Name it "myTable.xml". Note that most of the XML file shown below is commented sections to help you learn about the supported features of this type of XML file.
  7. Create an on click action for the button on the ToolBook page. The action should call a single PowerPac function called XMLHttpRequest(). This function loads our XML configuration file with all the table and other requirements. Notice that the notifyObject parameter is set to name of self or the button that will be clicked. This tells the PowerPac to send a user event to the button when the XML file has fully loaded.
    Image 3.png
    On click event for button
    Image 3.png (14.24 KiB) Viewed 7462 times
  8. Add the user event action to the button to be executed once the XML file has loaded. This action will retrieve the CSV file from the server and notify the group "my_csv_data" by sending it a user event with the value parameter set to the data in the CSV file.
    Image 4.png
    Retrieve the CSV file AFTER loading the XML configruation file.
    Image 4.png (14.5 KiB) Viewed 7462 times
  9. Finally, we need to tell the PowerPac to include our external files in with the exported project. Since our actions will be looking for our files in the media folder, we should use the PowerPac DHTML Export Tree Manager to flag the files in that folder.
    Image 5.png
    PowerPac DHTML Export Tree Manager with external files flagged for inclusion in the media folder.
    Image 5.png (82.65 KiB) Viewed 7462 times
  10. Export your project and the CSV file should load itself into the XML table.
    If you explore the XML file, you will notice the defined function for the user event on the group "my_csv_data". This is the event/function which actually manipulates the data and puts it into the table cells. Please note that It is possible to dynamically add rows to the table to accommodate various CSV files, but that is beyond the scope of this posting.
As always, we can assist you in performing virtually any task in your projects.

Enjoy!
Attachments
SOURCE.zip
Full source code in ToolBook v11.5; other versions can use at least the external dependencies, etc.
(51.46 KiB) Downloaded 434 times
Clifton
Site Admin
 
Posts: 731
Joined: Tue Jan 14, 2014 1:04 am

Return to XML Configurations – Plugin Examples

Who is online

Users browsing this forum: No registered users and 1 guest

cron