NT102: How to query data and show it on your page

By Kevin M Schreiner

January 09, 2009

Introduction

The purpose of the "Newbie Track" of the Open Web Studio training videos is to get you started down the best development path by teaching you to use industry-proven approaches and standards as practiced by the Open Web Studio Team, and surrounding community.

Abstract


The goal of this video, "How to query data and display it on your page" is to explain in brief the use of the Open Web Studio template system.
The video presents the concepts of the Query and Template components.  By gaining an understanding of the Template Query, Detail and no query actions, you will leave this video with a firm understanding of how the general data display works in Open Web Studio. You will also learn  to display the values from your columns. This video includes a quick explanation on manipulating the actions in the code tree through the use of the keyboard arrow keys. Finally, this video provides a quick overview of how to enable paging within your content, and how to enable AJAX paging and page history.

NT102
NT102: Watch and Learn


To get started, lets assume you have already installed Open Web Studio on your target platform.

 

  1. Drop an OWS module on your page.
  2. Jump into the administration.
  3. Click New in the Configuration Ribbon group, to get started.
  4. For the sake of simplying the demonstration, delete the default actions created by the new configuration template. This default template is useful as a starting point in many common situations, but a bit more in depth than necessary for this tutorial.
  5. Now open the General tab, giving this configuration a name. In our case, "NT102" and press Save.
  6. Just as we did in the previous session, add a Detail Template action.
  7. Change the type of this Detail template to Detail (No Query).
  8. In the text area, enter "Hello World - No query defined!".
  9. Press Publish
  10. Jump back to the page and then in settings, assign this module to the "NT102" configuration.
  11. Click Update
  12. Now you can see our text, just as it was entered in the No Query template.
  13. Switch back to the Administration Window.
  14. Now - Let's add a simple Query to our template. Click Template from the action ribbon group, which will add the default Query template
  15. Double click the Query template.
  16. In the Content, add the following query: "Select * from Lists". This table is one of the primary default tables within all DotNetNuke instances, and is great for demonstration because it always comes prefilled with a variety of content.
  17. Now, we aren't defining any special Filter, or a Custom Connection here, but you can learn more about this by reviewing some of the additional Tutorials, or the Wiki.
  18. Click Save.
  19. Now, add a Detail Template. You can make this entry a child of the Query Template for the sake of ordering your code in a logical fashion. To do this simply select the Detail template, then press the right arrow key to make it a child of the preceding action.
  20. You can use your arrow keys to do other things within the action tree. Up moves an item up the tree, down moves it down the tree. Left and Right allow you to move items in and out of the tree branches along with their children. Additionally, Shift Up and Shift down allow you to more gracefully "crawl" an action up and down the code tree.
  21. Now, let's get back to the detail template. Double click the entry to get started.
  22. Our goal is to display a List Item for each record in the resulting query. We want each item to display the EntryID, which is the primary key of our table, the ListName which is the name of the Group, and the Text column which is the physical text value associated with the entry.

    In the Content attribute add the HTML LI token.
    <li></li>

    Now, place the content into the list item. To display a column we just need to put it's name in square brackets:
    <li>[EntryID]</li>

    And now we have the numeric EntryID. Next put in the ListName and Text columns:
    <li>[EntryID]: [ListName] - [Text]</li>
  23. Okay. Now press Publish, then switch back to the front end to see the result. Notice we no longer see the "Hello World!" text. That is because we now provided a query. But as you can tell there are quite a few records here. Let's add paging into the output to get a better idea of how we can see the list.
  24. Go back to the Administration page and click the General Tab.
  25. At the top of the page, just below the Name, set the number of records per page to 10.
  26. Now uncheck the "Show All Records" option.
  27. Finally, we can get away with either Ajax Paging, or Standard paging via post back. There are two methods for this. For standard paging, check the box that says "Show Page Selection".
  28. Now press save, then publish.
  29. Review the front end to see the result.
  30. To enable ajax paging for the same content, return to the Administration and again enter the General Tab.
  31. Check the box in the Ajax Integration region that says "Enable Ajax Interaction"
  32. Again, press Save then Publish and Review the front end to see the result.
  33. Now notice the rapid response of the paging, as well as the Ajax Fetching Status that appears below the list.
  34. To turn off the status message, return to the General tab and select the checkbox labeled "Ajax Interaction - Custom Status". This will remove the default status alerts and allow you to override the messages if desired.
  35. Additionally, you may want to track the most recent page in the page history so that the Back link from the next page will return back to a specific page in the list. To do this - check the box which says: "In Ajax Mode, Enable the Ajax Page History". You can give it a name to appear in the url too - for now enter: NT102
  36. Again press Save then Publish and Review the Front End to see the result.
  37. Notice the modified URL during paging now and the elimination of the Status box. The response is fast and even.



You should now have a decent understanding of how to begin displaying data with your configurations, interact with the action tree to provide order to your code logic and additionally, utilize the default and ajax paging capabilities.

Each tutorial within the Newbie Track series will provide the same simplistic approach to using Open Web Studio. To find out more, just watch the next video in the series.

 

Average (4 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share