< Previous Article Next Article >

pjs.defineDisplay()

The pjs.defineDisplay() API allows you to access a Rich Display definition from a stateful application. It creates an instance of a Rich Display as an object with properties for each screen and each grid in the Rich Display definition.

The API accepts the following parameters:

1. object name passed as a String; it is common convention to name this object "display"; the API will create the object in the current function scope
2. json file name where the Rich Dislpay definition is stored

function app() {
  pjs.defineDisplay("display", "app.json");
  // display processing can follow
}
exports.default = app;

execute() screen method

The execute() method displays a specific Rich Display screen and waits for the user to respond. You can pass bound values as an object to the method.

function app() {
  pjs.defineDisplay("display", "app.json");
  display.myScreen.execute({ message: "Welcome to Profound.js Spaces!" });
}
exports.default = app;

You can also assign bound values before calling the method. This is possible because all bound values are automatically defined within the current function scope when you use pjs.defineDisplay().

function app() {
  pjs.defineDisplay("display", "app.json");
  message = "Welcome to Profound.js!";
  display.myScreen.execute();
}
exports.default = app;

replaceRecords() grid method

The replaceRecords() method replaces records in a grid with an array of objects. Each object's key names must match the bound field names in the Rich Display.

// Hard-coded records
display.myGrid.replaceRecords([
  { item: "Profound.js T-shirt", price: 34.99 },
  { item: "Profound.js Sweatshirt ", price: 54.99 },
  { item: "Profound.js Hoodie", price: 59.99 }
]);

// Records from a database
let products = pjs.query("SELECT * FROM products");
display.myGrid.replaceRecords(products);

getRecords() grid method

The getRecords() method retrieves grid records, including any user input on an input-capable grid, and returns them as an array.

// Update shopping cart amounts based on quantity entered
let items = display.shoppingCard.getRecords();
items.forEach(item => {
  item.amount = item.price * item.quantity;
})
display.shoppingCard.replaceRecords(items);

filter() grid method

The filter() method returns an array of all records in the grid that satisfy a certain condition.

// Retrieve selcted items on a grid with record selection enabled and bound to a field named "selected"
let selectedItems = display.itemsGrid.filter(item => item.selected);

// Retrieve checked items on a grid with a checkbox column, bound to a field named "checked"
let checkedItems = display.itemsGrid.filter(item => item.checked);

// Retrieve items where shopping cart quantity entered is greater than 0
let purchasedItems = display.shoppingCart.filter(item => quantity > 0);

Other grid methods

There are many other useful grid methods, including:

• addRecords()
• applyFilter()
• applyMap()
• clear()
• delete()
• every()
• find()
• findIndex()
• forEach()
• getCopyOfData()
• getFieldNames()
• getRecord()
• getRecordCount()
• insert()
• map()
• pop()
• push()
• readChanged()
• reduce()
• setGridRecNumField()
• shift()
• slice()
• some()
• sort()
• splice()
• unshift()
• update()
• write()

For a full explanation of each method, see Profound.js documentation.

Questions?

Have questions about this topic? Ask for help on our Profound.js Spaces Discussion Forum.

< Previous Article Next Article >