Suitelet: Multiple GET and POST calls pattern

Suitelets are used to display UI elements (GET) followed by submission and processing of data from this UI (POST)


Workflow: GET and generate a page using record/list lookups --> user selects data, submits --> POST sends data to backend for processing

We can setup mechanisms to call GET and POST methods over and over, each time using the POSTed data in the displaying GET UI page

Lab Example

1. Define a ‘GET’ condition to display a UI page with multi select fields and a submit button

function main(request, response)
{
    /*  GLOBALLY ACCESSIBLE VARIABLES TO HOLD SELECTED DATA *******/
    var SELECT_FIELD_ADD    = request.getParameter("select_to_add_field");
    var SELECT_FIELD_TAKE   = request.getParameter("select_to_take_field");
    var CHECK_SUBMIT        = request.getParameter("check_submit_field");

    var HEIGHT = "6";
    var WIDTH = "200";

    if(!SELECT_FIELD_ADD && !CHECK_SUBMIT)
    {
        /* 1. CHECK IF FIELDS EXIST    *******************
         *    IF NOT THEN CREATE THEM ON A FORM ************/

        var form            = nlapiCreateForm('Multiple Conditions Example');
        var select_to_add   = form.addField
                  ("select_to_add_field", "multiselect", "Sender Field");
        var select_to_take  = form.addField
                  ("select_to_take_field", "multiselect", "Receiver Field");

            select_to_add.setDisplaySize(WIDTH, HEIGHT);
            select_to_take.setDisplaySize(WIDTH, HEIGHT);

            select_to_add.addSelectOption('Zeta','Zeta');
            select_to_add.addSelectOption('Wing','Wing');
            select_to_add.addSelectOption('X','X');
            select_to_add.addSelectOption('Seed','Seed');
            select_to_add.addSelectOption('00','00');

       form.addSubmitButton("Add these to the Receiver Field");
       response.writePage(form);
    }

2. Create the ‘POST’ condition which takes the selected GET UI page data to populate another UI page

else if(SELECT_FIELD_ADD && !CHECK_SUBMIT)
    {
        /* 2. NOW TAKE THE SELECTED VALUES AND ******
         *    USE THEM IN A DIFFERENT FIELD *********
         *    CREATE A CHECKBOX FIELD TO DETERMINE NEXT */

        var form            = nlapiCreateForm('Multiple Conditions Example');
        var select_to_add   = form.addField
                    ("select_to_add_field", "multiselect", "Sender Field");
        var select_to_take  = form.addField
                    ("select_to_take_field", "multiselect", "Receiver Field", SELECT_FIELD_TAKE);
        var submit_box      = form.addField("check_submit_field", "checkbox", "Complete the Suitelet");

            select_to_add.setDisplaySize(WIDTH, HEIGHT);
            select_to_take.setDisplaySize(WIDTH, HEIGHT);

        /* SEPARATE THE STRING OF PREVIOUSLY SELECTED OPTIONS *******/
        SELECT_FIELD_ADD   = SELECT_FIELD_ADD.split("");
        for(i=0; i< SELECT_FIELD_ADD.length; i++)
        {
            select_to_take.addSelectOption(SELECT_FIELD_ADD[i], SELECT_FIELD_ADD[i]);
        }

        form.addSubmitButton("Take them away!")
        response.writePage(form);
    }

3. Create a follow-up condition that triggers depending on whether a UI element (a checkbox) from the previous page has been selected

else if(CHECK_SUBMIT)
    {
        /* 3. IF THE NEW CHECKBOX VALUE IS TRUE *****
         *    PROCESS THE SUBMITTED VALUES **********
         *    OTHERWISE RETURN BACK TO THE BEGINNING **/

        SELECT_FIELD_TAKE   = SELECT_FIELD_TAKE.split("");
        var strGundam = "";

        var i=0;
        for(i=0; i< SELECT_FIELD_TAKE.length; i++)
        {
            strGundam += SELECT_FIELD_TAKE[i] + <br/>;
        }

        var html = 
            <html> +
                <body> +
                    <div> +
                        <p>You selected Gundam<br/> +
                            strGundam +
                        </p> +
                    </div> +
                </body> +
            </html>;

        response.write(html);
        /* HERE WE HAVE WRITTEN OUT THE DATA AS HTML *****
         * BUT YOU CAN DO ANYTHING WITH THIS DATA ********
         * E.G. YOU CAN PASS IT AS A URL VARIABLE IN 
         * NLAPIREQUESTURL ******************************/
}

4. This sequence can continue with further else if conditions and UI elements – the key is to couple the UI element with global variables to be passed between each GET/POST call to determine whether to move to a new page or go back.

Full code example:

/*
 * @author Michael Cheung
 * @date 22-02-2012
 * 
 * Demonstrates how to use multiple if statements
 * in a suitelet -
 * Allows further processing to take place
 * after 'POST' has been submitted
 * 
 */

function main(request, response)
{
    /*  GLOBALLY ACCESSIBLE VARIABLES TO HOLD SELECTED DATA *******/
    var SELECT_FIELD_ADD    = request.getParameter("select_to_add_field");
    var SELECT_FIELD_TAKE   = request.getParameter("select_to_take_field");
    var CHECK_SUBMIT        = request.getParameter("check_submit_field");
    
    var HEIGHT = "6";
    var WIDTH = "200";
    
    if(!SELECT_FIELD_ADD && !CHECK_SUBMIT)
    {
        /* 1. CHECK IF FIELDS EXIST    *******************
         *    IF NOT THEN CREATE THEM ON A FORM ************/
       
        var form            = nlapiCreateForm('Multiple Conditions Example');
        var select_to_add   = form.addField("select_to_add_field", "multiselect", "Sender Field");
        var select_to_take  = form.addField("select_to_take_field", "multiselect", "Receiver Field");
            
            select_to_add.setDisplaySize(WIDTH, HEIGHT);
            select_to_take.setDisplaySize(WIDTH, HEIGHT); 
            
            select_to_add.addSelectOption('Zeta','Zeta');
            select_to_add.addSelectOption('Wing','Wing');
            select_to_add.addSelectOption('X','X');
            select_to_add.addSelectOption('Seed','Seed');
            select_to_add.addSelectOption('00','00');
       
       form.addSubmitButton("Add these to the Receiver Field");
       response.writePage(form);
    }
    else if(SELECT_FIELD_ADD && !CHECK_SUBMIT)
    {
        /* 2. NOW TAKE THE SELECTED VALUES AND ******
         *    USE THEM IN A DIFFERENT FIELD *********
         *    CREATE A CHECKBOX FIELD TO DETERMINE NEXT */
             
        var form            = nlapiCreateForm('Multiple Conditions Example');
        var select_to_add   = form.addField("select_to_add_field", "multiselect", "Sender Field");
        var select_to_take  = form.addField("select_to_take_field", "multiselect", "Receiver Field", SELECT_FIELD_TAKE);
        var submit_box      = form.addField("check_submit_field", "checkbox", "Complete the Suitelet");
            
            select_to_add.setDisplaySize(WIDTH, HEIGHT);
            select_to_take.setDisplaySize(WIDTH, HEIGHT);
            
        /* SEPARATE THE STRING OF PREVIOUSLY SELECTED OPTIONS *******/
        SELECT_FIELD_ADD   = SELECT_FIELD_ADD.split("");
        for(i=0; i< SELECT_FIELD_ADD.length; i++)
        {
            select_to_take.addSelectOption(SELECT_FIELD_ADD[i], SELECT_FIELD_ADD[i]);
        }
        
        form.addSubmitButton("Take them away!")
        response.writePage(form);
    }
    else if(CHECK_SUBMIT)
    {
        /* 3. IF THE NEW CHECKBOX VALUE IS TRUE *****
         *    PROCESS THE SUBMITTED VALUES **********
         *    OTHERWISE RETURN BACK TO THE BEGINNING **/
             
        SELECT_FIELD_TAKE   = SELECT_FIELD_TAKE.split("");
        var strGundam = "";
        
        var i=0;
        for(i=0; i< SELECT_FIELD_TAKE.length; i++)
        {
            strGundam += SELECT_FIELD_TAKE[i] + <br/>;
        }
         
        var html = 
            <html> +
                <body> +
                    <div> +
                        <p>You selected Gundam<br/> +
                            strGundam +
                        </p> +
                    </div> +
                </body> +
            </html>;
            
        response.write(html);
        
        /* HERE WE HAVE WRITTEN OUT THE DATA AS HTML *****
         * BUT YOU CAN DO ANYTHING WITH THIS DATA ********
         * E.G. YOU CAN PASS IT AS A URL VARIABLE IN 
         * NLAPIREQUESTURL ******************************/
    }
    
    /* 4. ADDING OTHER IF ELSE STATEMENTS AND NEW FIELDS ***
     *    WILL ALLOW YOU TO CONTINUE FURTHER PROCESSING IN *
     *    THIS ONE SUITELET ********************************/
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: