2 year anniversary

Page navigation

VCL.JS offer single page navigation out of the box.

In this example  you get on the first page a list of customers clicking on a row VCL.JS will navigate the application to the second page where customer record will appear on screen.


import V = require(“VCL/VCL”);
export class PageHome extends V.TPage {
  constructor() {
    var qur = new V.TQuery(this);
    qur.SQL = “Select CustomerKey,firstName,LastName from Customers”;
    var grid = new V.TDBGrid(this,”grd”);
    grid.Dataset = qur;
    var col = grid.createColumn(“CustomerKey”);
    col.onClicked = () => {
    //please notice, parameters the the TPage object is passed as an array and encoded into the browser URL.
      V.Application.navigateToPage(“PageDetails”, [qur.getFieldValue(“CustomerKey”)])
    var col = grid.createColumn(“FirstName”);


import V = require(“VCL/VCL”);
export class PageDetails extends V.TPage {
 private qur: V.TQuery;
 constructor(CustomerKey:String) {
  this.qur = new V.TQuery(this);
  this.qur.SQL = “SELECT Customers.CustomerKey, Customers.FirstName, Customers.LastName, Customers.EmailAddress, ” +
     “Customers.Education FROM Customers where CustomerKey=?”;
  this.createInput(‘FirstName’, ‘first’, ‘First Name’);
  this.createInput(‘LastName’, ‘last’, ‘Last Name’);
  this.createInput(‘EmailAddress’, ’email’, ‘Email Address’);
  this.createInput(‘Education’, ‘education’, ‘Education’);

This entry was posted in Code Snippet and tagged , , . Bookmark the permalink.