« Back to Apex Home
Follow

Fields and Data Binding

In this lesson, you will add field views to the simple task coach created in tutorial 1.

Remove the Coaches Toolkit Dependency

In the Toolkit panel on the left, select the 'Coaches' toolkit, right click and remove dependency. We are going to use drag and drop to build this example, and removing this toolkit cuts down on confusion. ACV2T1-2-1.png

Drag the Product Variable onto the Coach

Drag the product variable and drop it into the row on the coach. Views will automatically be created for the parameters of the variable. As we will not be editing the product Id, right-click and delete that view. ACV2T1-2-2.png

Adjust view types

Some of the views created may not be the ones we want for the parameters of the product variable. Select the Product Class and in the general properties, select the Text view. Repeat for Make and Model. You will notice the 0-60 field also needs to be changed to a Decimal view instead of Currency.

ACV2T1-2-3.png

Set Column Width to 3

On the configuration tab of each view, set the responsive width to 3. This means each view will take 3 12ths (or 1 4th) of the screen regardless of screen size.

ACV2T1-2-4.png

Run the Service and Adjust Screen Size

Run the service and look at the fields. Try adjusting the size of the browser window and notice that the grid of controls stays 4 wide. The button group is in the same row as the fields and so it also maintains 1/4 width.

ACV2T1-2-5.png

Add Separate Row for Button

Add a new row and drag the buttons into it. Set the label visibility on the row to Hide

ACV2T1-2-6.png

Set Responsive Widths

Set the responsive width for each view to 12,6,3,2. This specifies the number of columns, the view will occupy for small, medium, large and extra-large screens. 12 columns occupy the full width of the screen.

ACV2T1-2-7.png

Run the Service and Adjust Screen Size

Run the service and look at the fields. Try adjusting the size of the browser window and notice the number of controls on a changing from four to two to one, depending on the window size. This is because of the responsive width setting.

ACV2T1-2-8.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments