skybow SharePoint Apps
Marketing Shop

With Rich Forms even more complex business applications like building a simple marketing shop solution with the option to collect items in a virtual shopping cart becomes easily possible. You may view the contents of your shopping cart and add or delete items as you like. The shopping cart will automatically calculate the total cost.

Clicking on the ‘Add to Cart’ button adds the item to the personal shopping cart. Once an item is added, the shopping cart on the right side of the page will display the change by adding the new product or increasing the number of an previously added products. The total cost (Amount) will also be changed accordingly.

 

The 'Next Image' button functionality improves the visual appeal and makes the form more dynamic. It is not displayed if there is only one product photo.

 

Clicking on the 'Order' button brings up a dialog with the auto populated Order information. After filling out other fields and saving the form user sees the success message.

 

Steps to configure:

 

Step 1: Setting up the needed lists

 

 

Step 2: Configuring Elements and layout of the Products Display form

Structurally the form consist of list fields, inserted related list (Product Colors) and inserted List View web part (Order Cart List).

Products List fields that are used on the display form are:

 

Elements are placed in 3 vertical groups. Vertical groups are inside the horizontal one. In this way 3 column layout is created.

The second vertical group contains Product Colors list.  It was inserted using the Related List option on the Insert tab of the ribbon.

Afterwards the view was modified to display just one needed column.

To modify view, select the row with some item of the current list and click Modify View option on the List tab of the ribbon.

 

The third vertical group contains Order Carts list view.  It was inserted using the App Part option on the Insert tab of the ribbon.

Afterwards the view was modified to display only needed columns and items. The items are filtered by current user and by empty related Order item.

 

Step 3: Configuring picture fields
       

The form contains 3 picture fields. That's why the button for switching images is added.

The button should be displayed only if there are 2 or more images. With this purpose the Visible expression for that button is set:

Visible expression
Copy Code
=[[Image2]] != "http://"

 

 

To configure the action:

Execute Script action
Copy Code
var buttonContainer = jQuery('#nextImage').closest('.ard-group');
var container = buttonContainer.closest('.ard-group-body');
var images = container.children('.ard-group');
for(var i=0; i<images.length; i++){
  jQuery(images[i]).hide();
}
images = jQuery.map(images, function(element){
    return jQuery(element).find('img').length ? element : null;
});
if( typeof window["imageId"] == 'undefined'){
  window["imageId"] = 1;
} else {
  window["imageId"]++;
}
var imageToShow = images[window["imageId"] % images.length];
jQuery(imageToShow).show();
buttonContainer.show();                              

 

 Picture fields should also have configured Visible expressions:

1-st field
Copy Code
=true
2-nd field
Copy Code
=false
3-d field
Copy Code
=false

 

      
Step 4: Configuring buttons with actions
       

There are two more buttons with actions on the form: Add to Cart and Order.

 

Add to Cart button contains Add list item action that adds the new item of the Order Carts list an Reload Page action.

      

Add list item action  - Add Order Cart Item

The configuration is as following:

 

 

Order button contains 4 actions:

 

Add list item action - Create Order Item

The configuration is as following:

 
Title field value
Copy Code
{ var newDate = new Date().format("dd/M/yy h:mm tt"); var title = [[@User.Title]] + "_" + newDate.toString(); window["NewOrderTitle"] = title; return title; }

 

Update list item action - Update Order Carts

The configuration is as following:

       

List item Id value
Copy Code
[[@Web.GetValuesForQuery('Order Carts', '<Query><Where><And><BeginsWith><FieldRef Name="Title" /><Value Type="Text">[[@User.Title]]</Value></BeginsWith><IsNull><FieldRef Name="Order0"/></IsNull></And></Where></Query>', 'ID')]]
Order value
Copy Code
{ var id = [[@Web.GetFirstValueForQuery('Orders', [[='<Query><Where><BeginsWith><FieldRef Name="Title" /><Value Type="Text">' + window["NewOrderTitle"] + '</Value></BeginsWith></Where></Query>']], 'ID')]];window['OrderId'] = id;return id + ';#'; }

 

Open List Form action - Redirect to Order Item

The configuration is as following:

 

Step 5: Configuring Edit form of Orders list

Orders Edit form consists of form fields and inserted sublist: Order Carts, that is bound with the current list by lookup field.

With this purpose the Insert Sublist option on the Rich Forms tab was used.

       

 

Order Amount field should display the total order amount: sum of all Amount values from the Order Carts sublist.

Amount field of the Order Carts list has Calculated field type and is treated as a string. The following configuration for the Initial and Calculated values of Order Amount field gives the needed result.

Initial/Calculated value
Copy Code
{ var values = [[@SubLists.Order_Carts.Amount]];var sum = 0;for(var i =0; i< values.length; i++){    var parsed = parseFloat(values[i]);  if(!isNaN(parsed)){    sum+= parsed;  }}return sum; }

       

When the Order is saved the user is informed about successful saving. With this purpose the Execute Script action with the alert was added to the Save button actions. 

 

If the ordering is canceled, the current Order item should be deleted. It's implemented with the Delete List Item action on the Cancel button.

 

 

Solution is ready! 

 

See Also