Tutorial: Assigning a Page Title

By Kevin M Schreiner

March 29, 2010

Introduction

This demonstration walks through the assignment of a Page Title both via Assignment action (non ajax) and via Javascript and OWS.Fetch.

Abstract


Using OpenWebStudio to assign a PageTitle is simple. The following demonstration will show you how to change the Page Title in two ways - the first and most straight forward by utilizing the Assignment Action and the second, a more advanced scenario which assigns the page title during an AJAX operation.

Video
Tutorial: Watch and Learn

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

 

1. For the first scenario, add an Assignment Action to your configuration.
2. Set the Variable Type of the Action to "PageTitle"
3. Set the Value of the Action to the preferred value. You can use tokens here if there are any you need.
4. Save the action and publish the configuration.
It is important to note that the Page Title can ONLY be assigned via a NON AJAX request. During AJAX operations, the Page Title would need to be manually changed via a Script execution. To provide a more advanced scenario for establishing the page title by reading from the querystring via an AJAX operation, use the following scenario.
We will extend this configuration to show a list of Tabs contained within the database, and using ows.Fetch - the Querystring will contain a TabID, which will be named "tid". Whenever the "tid" value changes, the Title of the page should also change.
Typically I would not execute queries against the tabs table, but its a table I know will exist in your data structure, and is therefore safe to demonstrate.
1. Add a Region, and set it to Page Load Only. 
2. Add a Query Template and set the query to "Select top 20 * from Tabs"
3. Next we will add both a Detail and Footer template. For Ajax functionality we will call OWS.Fetch, which makes an AJAX request to the server, and expects in return markup which is to be both written tot he page and parsed for javascript tags. we will want the result of that fetch to be a Script execution, and it should not visually affect the displayed front end. To do this, we will need to pass a targetid to the AJAX request, that target being the location where the result should be rendered. In the footer template, add a dummy Div which will be used to contain the result. I normally give it an id like 'dvHidden', and a style setting it to display none.
4. Next, open the detail template and assign it to <div onclick="ows.Fetch('[ModuleID,System]',-1,'tid=[TabID]');','dvHidden');">[TabPath]</div>. Again, note the parameters. The first identifies the Module which is to be affected, the second, the page numbering. In this case we are not going to have our request affect the current page number so we set it to -1. The third parameter identifies the Querystring which will be dictated to the server, this appends to any querystring which is already assigned at the page level. And finally, as noted previously - dvHidden is the target of our request.
5. Now we  add a Region which specifically handles the AJAX request.
6. Add a Query Variable which will consume the tid from the querystring which is passed via OWS.Fetch. Name the variable @tid, and set it to only allow numeric values.
7. Add a Template action, and set the Query Template to consume the @tid variable we just created, "Select * from Tabs where TabID=@tid
8. Finally, add a detail action which sets the Page Title via javascript:
document.title = 'You selected [TabName]';
9. In the previous step, notice that single quotes could cause problems with the syntax. A special formatter has been added to allow for controlled encoding of JAvascript specifically. To make sure you dont have any problems, use the ENCODEJAVASCRIPT formatter instead of a straigh Column Value token:
[$TabName,{ENCODEJAVASCRIPT}]
10. Now you can see the result!

 

  1. For the first scenario, add an Assignment Action to your configuration.
  2. Set the Variable Type of the Action to "PageTitle"
  3. Set the Value of the Action to the preferred value. You can use tokens here if there are any you need.
  4. Save the action and publish the configuration.

It is important to note that the Page Title can ONLY be assigned via a NON AJAX request. During AJAX operations, the Page Title would need to be manually changed via a Script execution. To provide a more advanced scenario for establishing the page title by reading from the querystring via an AJAX operation, use the following scenario.

The next configuration can now be created to show a list of Tabs contained within the database, and using ows.Fetch - the Querystring will contain a TabID, which will be named "tid". Whenever the "tid" value changes, the Title of the page should also change.

Typically I would not execute queries against the tabs table, but its a table I know will exist in your data structure, and is therefore safe to demonstrate.

  1. Add a Region, and set it to Page Load Only. 
  2. Add a Query Template and set the query to "Select top 20 * from Tabs"
  3. Next we will add both a Detail and Footer template. For Ajax functionality we will call OWS.Fetch, which makes an AJAX request to the server, and expects in return markup which is to be both written tot he page and parsed for javascript tags. we will want the result of that fetch to be a Script execution, and it should not visually affect the displayed front end. To do this, we will need to pass a targetid to the AJAX request, that target being the location where the result should be rendered. In the footer template, add a dummy Div which will be used to contain the result. I normally give it an id like 'dvHidden', and a style setting it to display none.
  4. Next, open the detail template and assign it to <div onclick="ows.Fetch('[ModuleID,System]',-1,'tid=[TabID]');','dvHidden');">[TabPath]</div>. Again, note the parameters. The first identifies the Module which is to be affected, the second, the page numbering. In this case we are not going to have our request affect the current page number so we set it to -1. The third parameter identifies the Querystring which will be dictated to the server, this appends to any querystring which is already assigned at the page level. And finally, as noted previously - dvHidden is the target of our request.
  5. Now we  add a Region which specifically handles the AJAX request.
  6. Add a Query Variable which will consume the tid from the querystring which is passed via OWS.Fetch. Name the variable @tid, and set it to only allow numeric values.
  7. Add a Template action, and set the Query Template to consume the @tid variable we just created, "Select * from Tabs where TabID=@tid
  8. Finally, add a detail action which sets the Page Title via javascript:

    document.title = 'You selected [TabName]';

  9. In the previous step, notice that single quotes could cause problems with the syntax. A special formatter has been added to allow for controlled encoding of JAvascript specifically. To make sure you dont have any problems, use the ENCODEJAVASCRIPT formatter instead of a straigh Column Value token:

    [$TabName,{ENCODEJAVASCRIPT}]
  10. Now you can see the result!

 

 

Average ( Ratings):
 
Want to help out?
 
 

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

Bookmark & Share Bookmark and Share