GrapeCity
Published in

GrapeCity

How to Build a JavaScript Product Catalog Application

Datasource Sheet

Template Sheet

templateSheet.setBindingPath(0, 0, "Nr");

templateSheet.setBindingPath(0, 1, "Name");

templateSheet.setBindingPath(0, 3, "Price");

templateSheet.setBindingPath(0, 4, "Category");

templateSheet.setBindingPath(0, 5, "Description");

templateSheet.setBindingPath(0, 6, "Image");

templateSheet.setBindingPath(0, 7, "Review");

templateSheet.setBindingPath(0, 8, "Favorite");

templateSheet.setBindingPath(0, 9, "Rating");
  1. Data→ Sheet Binding→ Field List
  2. Hover over the Start branch and add fields by clicking the green + button *Note that you can remove fields with the “x” button and modify those with the settings located to the right of the branch
  3. Drag the fields in the desired cell of the template range

Render Sheet (Catalog)

Sort By Panel

  1. Home→ Cell Editors→ Cell Type
  2. Click Button List
  3. Set the Text and Value of items plus the different properties for the button list object.
  4. Add the Items
  5. Click OK
var cellType = new GC.Spread.Sheets.CellTypes.ButtonList();

cellType.items([{text:"Name (asc)",value:0},{text:"Name (desc)",value:1},{text:"Price (lowest)",value:2},text:"Price (highest)",value:3},{text:"Rating (lowest)",value:4}, {text:"Rating (highest)",value:5}]);

cellType.selectedBackColor("#0AA371");

cellType.selectedForeColor("#FFFFFF");

cellType.selectionMode(GC.Spread.Sheets.CellTypes.SelectionMode.single);// allows only 1 item to be selected

catalogSheet.getCell(3, 2).cellType(cellType);
//Sort by panel
catalogSheet.bind(GC.Spread.Sheets.Events.ValueChanged,function(type,args){
if (args.row ==3 && args.col==2)//only check if the button list value has changed
{
var i = 1; var asc = true;
switch(args.newValue){
case 1:
i= 1; asc = false;//sort by Name desc
break;
case 2:
i= 3; asc = true;//sort by Price asc
break;
case 3:
i= 3; asc = false;//sort by price desc
break;
case 4:
i= 8; asc = true;//sort by Rating asc
break;
case 5:
i= 8; asc = false;//sort by Rating desc
break;
default:
i = 1; asc = true; //sort by Name desc
break;

}
spread.suspendPaint();
//change the sorting
spread.getSheetFromName("DataSource").sortRange(1, 0, 15, 9, true, [
{index:i, ascending:asc}
]);
spread.resumePaint();
}
});

Products List

//first product
sheet.setFormula(5, 1, "=RANGEBLOCKSPARKLINE(Template!A2:E7,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data],1,SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

Selected Item

// select items
var row = 5, col =1;
catalogSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const newRow = args.newSelections[0].row;
const newCol = args.newSelections[0].col;
if ((newRow <5 || newRow > 9)
|| (newCol < 1 || newCol > 3))
return;

//change the item appearing on the right panel
var position = 3*(newRow - 5) + newCol;
sheet.suspendPaint();
sheet.setFormula(5, 5, "=RANGEBLOCKSPARKLINE(Template!H9:O21,OBJECT(tbProducts[#Headers],INDEX(tbProducts[#Data]," + position + ",SEQUENCE(COUNTA(tbProducts[#Headers]),1))))");

// change the color of the "plus" sign of the selected item
sheet.getCell(row, col).backColor("#dddddd");
sheet.getCell(newRow, newCol).backColor("#53b175");

sheet.resumePaint();
row = newRow;
col = newCol;

Add to Cart Button

// add cart button
var catalogSheet = spread.getSheetFromName("Catalog");

var rect3 = catalogSheet.shapes.add("addItem", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 782, 743, 260, 50);

rect3.hyperlink({
command: function () {
alert("You have added an item in your cart!");
}
});
rect3.text('+ Add to cart');
var style = rect3.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'rgb(83,177,117)'};
style.line.color = 'rgb(83,177,117)';
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
rect3.style(style);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
GrapeCity Developer Solutions

We provide developers with the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications.