Multiple Layout on a NetSuite Webpage

Recently, I came across a situation in which I was required to have two different item layouts on the same webpage, and one can choose between these layouts on the client side using a checkbox.

In order to do this, I used XML, Javascript and a bit of netsuite website.

Here are the steps of how I managed to do this.

1. Set the Item Cell Template as XML and set its display to none :

<td style="display:none">

<itemxml>
<itemdisplayname><%=getCurrentAttribute('item','storedisplayname')%></itemdisplayname>
<storediscription><%=getCurrentAttribute('item','storedetaileddescription')%></storediscription>
<itemquantity><%=getCurrentAttribute('item','quantityavailable')%></itemquantity>
<itemprice><%=getCurrentAttribute('item','salesPriceHTML')%></itemprice>
<itemimgurl><%=getCurrentAttribute('item','storedisplaythumbnail')%></itemimgurl>
<itemurl><%=getCurrentAttribute('item','storeURL')%></itemurl>
</itemxml>

</td>

2. In the Item List Template, added a checkbox(with a change event), a div where I would display the items and the <NLITEMLIST> tag :

<input type="checkbox" id="CheckLayout" onchange="LayoutChanged()"/>Layout 2
<div id="itemdisplayarea"></div>
<NLITEMLIST>

3. Added the following javascript code to the head in the website theme, along with reference to the jquery file(already added in the file cabinet) : 

function ReadXMLData(layoutChecked) {

    var itemName = document.getElementsByTagName('itemdisplayname');
    var storeDesc = document.getElementsByTagName('storediscription');
    var itemQuantity = document.getElementsByTagName('itemquantity');
    var itemPrice = document.getElementsByTagName('itemprice');
    var itemImgUrl = document.getElementsByTagName('itemimgurl');
    var itemUrl = document.getElementsByTagName('itemurl');

    var itemList = [];    

    for (var i = 0; i < itemName.length; i++) {
        itemList.push({
            Name: itemName[i].innerHTML,
            Description: storeDesc[i].innerHTML,
            Quantity: itemQuantity[i].innerHTML,
            Price: itemPrice[i].innerHTML,
            ImageURL:itemImgUrl[i].innerHTML,
            StoreURL:itemUrl[i].innerHTML
        });
    }

    document.getElementById('itemdisplayarea').innerHTML = GetLayoutHTML(layoutChecked, itemList);
}

function GetLayoutHTML(layoutChecked, itemList) {

    var layout = "";

    if (layoutChecked) {
        layout = "<table border='1'>";

        for (var i = 0; i < itemList.length; i++) {
            layout += "<tr>";
            layout += "<td>";

            layout += "<a href='" + itemList[i].StoreURL + "'>";
            layout += "<table>";
            layout += "<tr>";
            layout += "<td>";
            layout += "<img src='" + itemList[i].ImageURL + "' width=20 height=20 />";
            layout += "</td>";
            layout += "<td>";
            layout += itemList[i].Name;
            layout += "</td>";
            layout += "<td>";
            layout += "item description";            
            layout += "</td>";
            layout += "<td>";
            layout += itemList[i].Quantity;
            layout += "</td>";
            layout += "<td>";
            layout += itemList[i].Price;
            layout += "</td>";
            layout += "</tr>";
            layout += "</table>";
            layout += "</a>";

            layout += "</td>";
            layout += "</tr>";
        }
        layout += "</table>";
    }
    else {
        layout = "<table>";

        for (var i = 0; i < itemList.length; i++) {
            
            if (i % 2 == 0)
                layout += "<tr>";
            layout += "<td>";

            layout += "<a href='" + itemList[i].StoreURL + "'>";
            layout += "<table border='1'>";
            layout += "<tr>";
            layout += "<td>";
            layout += "<img src='" + itemList[i].ImageURL + "' width=50 height=50 />";
            layout += "</td>";
            layout += "<td>";
            layout += "<table>";
            layout += "<tr>";
            layout += "<td>";
            layout += itemList[i].Name;
            layout += "</td>";
            layout += "</tr>";
            layout += "<tr>";
            layout += "<td>";
            layout += itemList[i].Quantity;
            layout += "</td>";
            layout += "</tr>";
            layout += "<tr>";
            layout += "<td>";
            layout += itemList[i].Price;
            layout += "</td>";
            layout += "</tr>";
            layout += "</table>";
            layout += "</td>";
            layout += "</tr>";
            layout += "</table>";
            layout += "</a>";

            layout += "</td>";

            if (i % 2 != 0)
                layout += "</tr>";
        }
        layout += "</table>";
    }

    return layout;
}

function LayoutChanged() {
    var selectLayout = document.getElementById('CheckLayout').checked;    
    ReadXMLData(selectLayout);
}


$('document').ready(function () {
    document.getElementById('CheckLayout').checked = false; 
    LayoutChanged();
});

And all done...

I was also able to implement an item slider in netsuite using this same XML technique.

Please do tell me if you know any better method to do this.

Reason for nlapiSetFieldValue not working in BeforeLoad event of User Event script

If you are trying to use nlapiSetFieldValue in BeforeLoad event of a User Event Script , and wondering why it is not setting some fields value, then you might find the reason below

nlapiSetFieldValue API , if used in BeforeLoad event of a User Event Script , sets values only if the record is either new (being created ) or non-stored fields. (Non-stored fields are those that have the 'Store Value' preference unchecked on the custom field page.)

Another way to do this , is to use a 'Client Script' and PageInit event.That works.