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.stateIndex = state_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<stateTable.length; i++) {
    	state_mc.addItem(stateTable[i]);
    }
    	state_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.