Using Components > Creating forms using components > Managing and monitoring the data |
![]() ![]() ![]() |
Managing and monitoring the data
The data entered on each page of a multipage form can affect what form elements or pages are displayed and how the pages are displayed. To use the data entered by the user to display the form pages with the current data, you need to create functions for each page that retrieve the data and update the page display.
Example code from FormExample.fla
In the FormExample.fla file, the data stored in the loginData
object properties is maintained by getDataFromUI
and updateUI
functions defined for each form page in frame 1 of the Actions layer. The getDataFromUI
and updateUI
functions for each form page are defined in the first frame of the Actions layer along with the loginData
object in order to keep all the form actions together. The FormExample.fla file splits the getting and setting of the data into two functionsgetDataFromUI
and updateUI
in order to highlight the necessary code clearly, but in an actual form, these two functions could be combined into a single function for each page.
The updateUI
function for each form page is called from the first frame of the form page in the Frame Actions layer, as shown in the following code.
In the Frame Actions layer, on the first frame of page 1 of the form:
stop(); updateUIFromDataPg1();
In the Frame Actions layer, on the first frame of page 2 of the form:
stop(); updateUIFromDataPg2();
In the Frame Actions layer, on the first frame of page 3 of the form:
stop(); updateUIFromDataPg3(); // get the data from the UI elements on page 1 function getDataFromUIPg1() { loginData.nameField = name_txt.text; loginData.gender = genderGroup.getValue().getLabel(); loginData.cityIndex = city_mc.getSelectedIndex(); } // get the data from the UI elements on page 2 function getDataFromUIPg2() { loginData.junkMail = junkCheck_mc.getValue(); loginData.interestIndex = interest_mc.getSelectedIndex(); } // get the data from the UI elements on page 3 function getDataFromUIPg3() { // page 3 only displays data, so there is no data to get } // set the state of UI elements on page 1 using the loginData object values function updateUIFromDataPg1() { name_txt.text = loginData.nameField; for (var i=0; i<cityTable.length; i++) { city_mc.addItem(cityTable[i]); } city_mc.setSelectedIndex(loginData.stateIndex); genderGroup.setValue(loginData.gender + "_mc"); } // set the state of UI elements on page 2 using the loginData object values function updateUIFromDataPg2() { for (var i=0; i<interestTable.length; i++) { interest_mc.addItem(interestTable[i]); } interest_mc.setSelectedIndex(loginData.interestIndex); junkCheck_mc.setValue(loginData.junkMail); onChange(); } // display the results data on page 3 using loginData object values function updateUIFromDataPg3() { resultsName_txt.text = loginData.nameField; resultsGender_txt.text = loginData.gender; resultsState_txt.text = stateTable[loginData.stateIndex]; resultsInterests_txt.text = interestTable[loginData.interestIndex]; }
Once you have established a means of managing your data, you can set up the navigation of the form.
![]() ![]() ![]() |