UI Definition in HTML and TypeScript: Joined Fields

To add a field from a joined data access class (DAC) of the data view to the UI of an MYOB Acumatica form, you can use one of the approaches that are described in this topic. We recommend that you use the approach with periods.

Using Periods (Recommended)

In this approach to adding a joined field, you separate the view class name, the name of the joined DAC, and the field name with periods.

In the TypeScript code of the form, you do the following:

Declare a class with any name, such as the name of the joined DAC.
In the class, declare the properties for the joined fields that you are going to use. The names of the properties are the names of the fields.
For example, suppose that you need to add fields from the joined Customer class. The new class in TypeScript should look as follows.
```
export class Customer {
  AcctName: PXFieldState;
  ClassID: PXFieldState;
}
```
In the view class that corresponds to the data view with the joined DAC, declare a property for the joined DAC. The name of the property is the name of the joined DAC, and the type of the property is the class that you have just declared. The following example shows an example of the property for the joined DAC.
```
export class DiscountCustomer extends PXView {
  ...
  Customer : Customer;
}
```

As a result of adding the joined fields in this way, you can use them in HTML. You can specify the full name of the field, which includes the following parts separated by periods: the view class name, the name of the joined DAC, and the field name. Alternatively, if the fieldset that contains the field has the data view specified, you can use a shorter name that omits the view class name. The following code shows both of these approaches.

<field name="DiscountCustomer.Customer.AcctName"></field>
<field name=".Customer.AcctName"></field>

Using Two Underscores

In this approach to adding a joined field to the UI of an MYOB Acumatica form, you separate the name of the joined DAC and the field name in this DAC with two underscores. The following example shows the declaration of a joined field in TypeScript.

Customer__AcctName: PXFieldState;

The following HTML code uses this joined field.

<field name="Customer__AcctName"></field>