Get in touch

Download Plugin
WP Data Access
a

Classic Models

Get Premium
Start Trial
Z

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

Insights

This demo app is based on MySQL's Classic Model sample database.

Transactions are prohibited for anonymous users. Any attempt to insert, update, or delete data results in an "Unauthorized" error message.

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 the hook examples.

Show Hook Examples
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

})
Column Render Hook - Docs

Data Model

Classic Models

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 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

Unlock the possibilities of your WordPress dashboard

Get Premium