Classic Models

Demonstrated Features

Column Filters
Master-Detail Relationships
Embedded Charts (docs)
Column Renderer
Detail Panel Renderer



Required Skills

Mostly Beginner Level
JavaScript Hooks
Database Relationships



Required License

Premium

This demo app is based on MySQL's Classic Model sample database. Anonymous users are not allowed to make transactions in the demo app, and any attempt to insert, update, or delete data will result in an "Unauthorized" error message.

Installation



You can download the demo app and install it on your own server. In the downloadable version, transactions are enabled for administrators. Simply follow the instructions below to download and import the app, tables, and data.

Download

Download the Classic Models app, tables and data
Open your WP Data Access dashboard
Start the Data Explorer
Click Import SQL files
Import your downloaded ZIP file
Start the App Builder
Run your own copy of the Classic Models app

Download the Classic Models app, tables, and data

Data Model

Technical Insights



Using the App Builder requires no coding. Hooks are an optional feature meant for users who want to go beyond the basic App Builder functionality to add their own custom logic, fine-tune app behavior, extend features, and integrate with custom workflows. If you are not interested in hooks, you can skip these technical tutorials.

Products Table - Column Render Hook for the Stock Column

Adds a thumbs-up if stock >= 2000
Adds an orange background color if stock < 2000
Adds a red background color if stock < 500

((columnName, originalValue, renderedValue, row) => {

	if (originalValue < 500) {
		setBackgroundColor("red")
		setColor("white")
		return renderedValue
	} else {
		if (originalValue < 2000) {
			setBackgroundColor("orange")
			setColor("white")
			return renderedValue
		}
	}

	return `<span>
		<i class="fa-solid fa-thumbs-up"></i>
         
		${renderedValue}
	</span>`
  
})

Column Render Hook - Docs

Products Table - The BUY NOW Button

The BUY NOW button is added via a computed code field. This computed field requires "allow inline HTML" to be enabled.

(() => {

	return wpda.button(
    	"BUY NOW",
    	(() => window.open('https://wpdataaccess.com/pricing', '_blank').focus())
    )

})()

Computed Field - Docs

Customers Table - The BUY NOW Button

The Account Manager column is added via a computed code field. It uses the Sales Representative column's lookup information. This computed field requires "allow inline HTML" to be enabled.

(() => {

  return "{:lookup['salesRepEmployeeNumber']['firstName']}" !== ""
    ? `<i class="fa-solid fa-user-tie"></i> {:lookup['salesRepEmployeeNumber']['firstName']} {:lookup['salesRepEmployeeNumber']['lastName']} ({:lookup['salesRepEmployeeNumber']['extension']})` 
    : ""

})()

Using Lookup Values in Computed Fields - Docs

Customerss Table - Column Render Hook for the Credit Limit Column

Adds a check icon and changes the color settings if credit limit < 100000

((columnName, originalValue, renderedValue, row) => {
  
  if (originalValue < 100000) {
      setBackgroundColor("rgb(30, 136, 229)")
      setColor("white")
      return `<span>
          <i class="fa-solid fa-check"></i> 
          ${renderedValue}
      </span>`
  } else {
      setBackgroundColor("initial")
  }

  return renderedValue

})