Develop > Presentation layer > Customize WebSphere Commerce Accelerator, Organization Administration Console, or Administration Console > Tools framework > Element chaining


Create an element chain

This example uses wizards, however, it is possible to chain wizards, dialogs, and notebooks together.


Procedure

  1. In the originating wizard, immediately before launching the chained wizard.

    1. If necessary, save data from the first wizard:

      1. If the first container element needs to save its current state information, call the following JavaScript function:

        top.saveModel(parent.model); 
        

      2. To save the current panel name, call the following JavaScript function:

        top.setReturningPanel(String panelName);
        

        If no panel is specified, the first panel is used as the default.

        This function sets a URL parameter called startingPage, used to load the wizard starting from a user specified panel. This parameter is used to construct a link, which when clicked from the page history, leads to the correct panel in a wizard.

      3. If you have other data to save, use the following JavaScript function:

        top.saveData(Object data, String slotName);
        

        Where data is the JavaScript variable to save, slotName is a unique name needed later as a key to retrieve the data. slotName works as a hash key and its value is overwritten without warning.

        Caution: The slot name model is a reserved keyword and should not be used. If it is used, the information saved using top.saveModel() is overwritten.

  2. Launch the second wizard:

    To launch the second wizard, call the following JavaScript function:

    top.setContent(String text, String link, Boolean value, Object parameter);
    

    where text is the text displayed in the page history, for example, the title of the second wizard. The value of link is the second wizard's launching URL. If value is true, this adds a new item to the page history. The last optional parameter, parameter, is used only if the link contains national-language characters, which might become corrupted using direct URL location replacement. If this parameter is used, the tools framework dynamically generates a form based on this parameter object and submits the URL parameters in name-value pair format.


Results

  1. Optionally, call the following JavaScript function to return a JavaScript value (normally the model of the wizard) to the first wizard. This data is passed under the first wizard's model object.

    top.sendBackData(Object data, String slotName);
    

    where slotName is a unique name used to retrieve the data from the first wizard.

    To retrieve data from previous wizards in the chain, use the following functions:

    top.getModel(int 
    stepsBack
    );
    

    top.getData(String 
    slotName
    , int 
    stepsBack
    );
    

    Where stepsBack is the number of wizards previous to the current one which contain the data being requested (0 for the current wizard, 1 for the previous wizard.) This parameter is optional, and the default value is 0.

  2. To return to the first wizard, call the following JavaScript function:

    top.goBack(int stepsBack);
    

    The stepsBack parameter is optional, and the default value is 1. This function is equivalent to clicking the previous item on the page history.

The tools framework automatically refreshes the model variable to the saved state, set in stage 1, part a and goes to the returning panel, set in step 1 part b.

Optionally, you can call the following JavaScript function to get the "model" data sent back from the 2nd wizard, set in stage 2, part a:

top.getData(String slotName);

where slotName is the unique name where you sent back the data in stage 2, part a.


Related concepts

Wizards

Wizard branching

Element chaining


Related tasks

Add a wizard

Related reference

Wizard navigation behavior

Wizard JavaScript functions


+

Search Tips   |   Advanced Search