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 functions—getDataFromUI 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.