Reference Properties in the UI

Let’s learn about reference properties and how they should be rendered in the UI.

We'll cover the following

Render reference properties in the UI

Render reference properties in the UI

The widgets used for data input and output in a CRUD data management UI usually correspond to properties defined in an application’s model class. We have to distinguish between various types of input fields corresponding to various kinds of attributes and choice widgets, such as selection lists that correspond to enumeration attributes or to reference properties. Representing reference properties in the UI with select controls instead of input fields prevents the user from entering invalid ID references, taking care of its referential integrity.

Get hands-on with 1400+ tech skills courses.

Introduction

The Foundations of Web Apps

Javascript Fundamentals

Building a Minimal Web App with Plain JS in Seven Steps

Integrity Constraints and Data Validation

Constraint Validation in Plain JS

Enumerations

Enumeration Attributes in Plain JS

Reference Properties and Unidirectional Associations

Implementing Unidirectional Functional Associations

Implementing Unidirectional Non-Functional Associations

Bidirectional Associations

Implementing Bidirectional Associations

Subtyping and Inheritance

Subtyping with Plain JS

Conclusion

Reference Properties in the UI

Render reference properties in the UI