MultiValue Quick Start Tutorial
Adding the View
[Home] [Back] [Next]
InterSystems: The power behind what matters   

Finally, we add the view. In this case the view is a form component. When the user of our application selects a row on the table, the application loads the data for the selected PERSON into the form. The user can then update that data.

  1. Add the following form component to PersonPage.cls. Place it in the XData Contents block between the <page></page> tags and after the tablePane component:
    <form id="personForm" 
         cellStyle="padding: 2px; padding-left: 5px; padding-right: 5px;"
    Note the following about the code:
  2. Next, add the following text and textArea controls to the form. Place them between the <form></form> tags:
    <text label="ItemId:" dataBinding="ItemId" id="ItemId" name="ItemId"
    <text label="Name:" dataBinding="Name" id="Name" name="Name" size="25"/>
    <text label="Hair:" dataBinding="Hair" id="Hair" name="Hair" size="25"/>
    <text label="Age:" dataBinding="Age" id="Age" name="Age" size="25"/>
    <textarea label="Phones:" dataBinding="Phones" id="Phones" name="Phones"/>  
    Each component's dataBinding attribute binds the component to a property of the model class.
  3. Finally, add the following set of components immediately after the textArea component. This set of components creates one button: Save. The exercises ask you to add two additional buttons: New and Delete.
      <button caption="Save" onclick="zenPage.savePerson();" />
    Note the following about the code:

Send us comments on this page
Copyright © 1997-2019 InterSystems Corporation, Cambridge, MA