Step 5 - Drilling down into the customer list

Ok, now that we know how to display a basic list, let's snazz it up a little bit by adding some hyperlinks to it so we can drill down into the data and display some detail.

Change the CustomerList SQL to:

SELECT HREF([ShowCustomer.wp?id=] + id,company) as Company, ;
       FirstName + LastName as Customer_Name, ;
       ShortDate(Entered,1) as Entered ;
   FROM Customers ;
   WHERE UPPER(Company) = UPPER(lcCompany) ;
   ORDER BY Company ;
   INTO CURSOR TQuery      

Here's what the list looks like now:

This also makes the list look a little nicer by displaying less information, cleaning up the labels and more importantly adding hyperlinks for each of the customer entries.

Expressions

You can control the headers of the grid via the field names generated in the query. I combined the LastName and FirstName fields with an expression that concatenates both and then creates a Customer_Name field. The renderer automatically replaces the _ with a space.

The hyperlink for drilling into the data by going to another page is generates as a string using the HREF() helper function which takes a URL and a caption as input and generates URL. The URL generated is something like:

http://localhost/WebDemo/ShowCustomer.wp?id=_4FG12Y7TX

which points to another page. If you click on noe of the links now you'll find that the request fails:

This makes perfect sense: We haven't created a ShowCustomer method

Showing the Customer entry

To display the customer we need a new method ShowCustomer in the WebProcess class. This method looks like this:

FUNCTION ShowCustomer()
LOCAL lcId,lcHtml

lcId = Request.Params("id")

SELECT * FROM Customers ;
   WHERE id = lcId ;
   INTO CURSOR TQuery

IF _Tally < 1
   *** Create an error page
   this.ErrorMsg("Invalid Customer Id",;
   "The customer couldn't be retrieved. Make sure the URL is correct " + ;
   "and points at a valid customer record.hr/>Please return to the <a href='Customerlist.wp'>customer list</a>...")
   RETURN 
ENDIF

*** Helper to generate templated HTML Header
Response.Write(this.PageHeaderTemplate("Customer List"))


TEXT TO lcHtml TEXTMERGE NOSHOW
<a href="customerlist.wp" 
   class="btn btn-success btn-sm pull-right" 
   style="margin-top: 20px;">
	<i class="fa fa-arrow-left"></i> Customer List
</a>

<h3>
   <i class='fa fa-user'></i> <<Company>>
</h3>   

<hr />
ENDTEXT
Response.Write(lcHtml)

*** Render the Record into a table
lcHtml = HtmlRecord("TQuery")
Response.Write(lcHtml)

Response.Write(this.PageFooterTemplate())

ENDFUNC

The output from this HtmlRecord generated record display looks like this:

This output is very basic and non-filtered, but HtmlDataGrid() it gives you a quick way to display data from a single record or object.

Note this display is not a table, but rather a responsive layout that stacks in smaller screen dimensions so it works on mobile devices. Small width view looks like this:

HtmlRecord Formatting

The HtmlRecord() function, like HtmlDataGrid() can take a configuration object that lets you specify exactly how data is displayed. This takes a little more code, but gives you more control.

You create an HtmlRecordConfig object object and then attach individual HtmlRecordColumn objects to specify how each column is rendered.

loConfig = CREATEOBJECT("HtmlRecordConfig")
loConfig.Width = "700px"

*loConfig.HeaderCssClass = "col-sm-3 my-record-header"
*loConfig.ItemCssClass = "col-sm-7"

*** Create columns manually for each field
loCol = CREATEOBJECT("HtmlRecordColumn","Company")
loConfig.AddColumn(loCol)

loCol = CREATEOBJECT("HtmlRecordColumn","FirstName + ' ' + LastName","Name")
loConfig.AddColumn(loCol)

loCol = CREATEOBJECT("HtmlRecordColumn","Address")
loCol.FieldType="M"
loConfig.AddColumn(loCol)

loCol = CREATEOBJECT("HtmlRecordColumn","Email")
loConfig.AddColumn(loCol)

loCol = CREATEOBJECT("HtmlRecordColumn","BillRate","Bill Rate")
loCol.Format = "$$,$$$.99"
loCol.FieldType = "N"
loConfig.AddColumn(loCol)

loCol = CREATEOBJECT("HtmlRecordColumn",[ShortDate(Entered,2)],"Entered")
loCol.FieldType = "C"
loConfig.AddColumn(loCol)

lcHtml = HtmlRecord("TQuery",loConfig)
Response.Write(lcHtml)

As you can see you can reorder columns, hide columns, reformat the data and add format expressions and more. Using this code here's what the page looks like now:

Much cleaner, eh?


Step 6 - Capturing HTML Form Data


© West Wind Technologies, 1996-2017 • Updated: 02/01/16
Comment or report problem with topic