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.
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:
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
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() 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.
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?
Comment or report problem with topic