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.

PageHome.ts

import V = require(“VCL/VCL”);
 
export class PageHome extends V.TPage {
  constructor() {
    super();
 
    var qur = new V.TQuery(this);
    qur.SQL = “Select CustomerKey,firstName,LastName from Customers”;
    qur.open();
 
    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”);
  }
}

PageDetails.ts

import V = require(“VCL/VCL”);
 
export class PageDetails extends V.TPage {
 private qur: V.TQuery;
 
 constructor(CustomerKey:String) {
  super();
 
  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.qur.createParam(CustomerKey);
 
  this.qur.open();
 
  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.