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.