Overview
Template by Sandu | December 11, 2015

Order Details is used to display details of all orders. Order details along with Order id, Sales Person, Order Date, Shipped Date and Shipped via details get displayed in the Order Details Dashboard. On clicking the order id link, the corresponding order id is passed to another form, which is the MainForm and the MainForm gets displayed. This form displays product and supplier details with corresponding order id.

Prerequisite(s)
  • SharePoint 2013
Details of Customer Order 1
Data Structure
SharePoint list is used as a DataSource for Sales Viewer. SharePoint lists consist of rows and columns that store data in a similar fashion to a traditional relational database management system such as SQL Server. However, a benefit of lists is that SharePoint includes Web Parts that provide simple methods for managing the data. If the data was stored in a database, it would require custom user interface components to access it and manipulate it. Also, specialized skills are required to design, implement, and maintain a custom database. Another advantage of using lists is that custom workflow and event handlers can easily be registered to them. By default ID, Title, Modified, Created, Modified By, Created By, Attachments columns are available in SharePoint list. Apart from these default list columns, user can add more columns depends on requirement.

SharePoint List
List Name Column Name Data Type
ProductList

Details of all the products are stored in this list.

 Category Single line of text
SupplierID Number
IsDiscontinued Single line of text
ProductName Single line of text
UnitPrice Single line of text
ProductId Single line of text
SharePoint List
List Name Column Name Data Type
OrderList

Details of all orders are stored in this list.

 ShippedDate Single line of text
ShipVia Single line of text
CustomerID Single line of text
SalesPerson Single line of text
OrderDate Date and Time
equiredDate Date and Time
SharePoint List
List Name Column Name Data Type
OrderedProduct

Details of ordered products are stored within this list.

 SupplierID Number
ProductID Single line of text
Quantity Single line of text
Discount Single line of text
UnitPrice Single line of text
OrderID Single line of text
SharePoint List
List Name Column Name Data Type
SupplierList

Details of the supplier are stored in this list.

 PostalCode Single line of text
Address Single line of text
Country Single line of text
Region Single line of text
City Single line of text
Contact Name Single line of text
Contact Title Single line of text
Phone Single line of text
Fax Single line of text
HomePage Single line of text
Company Single line of text
Design And Configuration
Order Details is used to display details of all orders. Order details along with Order id, Sales Person, Order Date, Shipped Date and Shipped via details get displayed in the Order Details Dashboard. On clicking the order id link, the corresponding order id is passed to another form which is the MainForm and the MainForm gets displayed. This form displays product and supplier details with corresponding order id. The order of creation of forms would be MainForm and then Dashboard form. This is because click on the Order Id link displayed in the search grid on Dashboard Form is configured to open MainForm. The best approach would be to complete the form design of all forms before starting on the rules.

List Of Forms Used
Name Functionality
Dashboard Form Design Rule Design Displays all order details.
MainForm Form Design Rule Design This is the form to which it navigates on clicking the order id displayed in the order details dashboard.
Dashboard
Dashboard Form Design
01
Form Creation

Create a NewForm in the OrderDetails folder and open it for editing. Click anywhere on the form to get the form properties loaded in the Properties window. Change the Name of the form to Dashboard. Set the Width of the form to 1200 and Height to 1000.

02
Basic Search Configuration

Drag a search control. Click on search control and name it as “srcDashboard” in properties window on the right. This search control is used to display the details of all the orders. Set width 685 and height 250 by editing in properties window.

03
Configuring Search DataSource

For configuring DataSource settings in search control, click on grid to get the Properties window for the search Grid. In the properties window, select SharePoint from the Dropdown for DataSource.

04
DataSource Tab

Click on the grid to get the popup menu, choose DataSource tab and click on New DataSource Configuration.

05
List Selection

Available lists in SharePoint. Choose OrderList from the given set of lists and click Next.

06
Choose columns needed

Select the Result columns that are to be displayed on the grid, make sure you include the Id column. Click Next.

07
Search Criteria

Enter the selection criteria as shown below. ID NotEquals “0”.

08
Search Result Configuration

Click Next until you reach the Search Result Configuration screen. The columns you had chosen would be shown there. You can modify the Column Header to give a user friendly name to the column. For Date column change the default Type chosen as DateTime to Date if only date is to be displayed.

09
Order of Result Columns

In order to change the Order Id column as link button, click on the Configure Column button.

10
In Configure Column Links, choose Link Button for Column Type. Choosing Link Button opens another section below, where you can choose the form to navigate to when the button is clicked. Enter the folder name where the form is present and search to get that folder alone. Choose the form to be opened, in this case the MainForm. Choosing this form makes this available in the Form Name drop down below. Choose the field to be mapped in the MainForm from the Field Name drop down. In this case hdnID. In the Result Field choose Order Id. Click the + button to add this form to the box below. Click Ok. Click Finish.

Configuring Link Button
Adding Navigation
Dashboard Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
Rule – FormLoad

Fills the Dashboard search. Sets the header background color and font color using GridSetRowStyle.

02
Rule Name : SetColor | Trigger(s) : No Trigger
Rule – SetColor

Is used to set background colors to alternative rows in search.

MainForm
MainForm Form Design
01
Create a NewForm in the OrderDetails Folder and open it for editing. Click anywhere on the form to get the form properties loaded in the Properties window. Change the Name of the form to MasterForm. Set the Width of the form to 1200 and Height to 1000.
02
Add a textbox and name it hdnID. Set the visibility of the text box to false by unticking the visibility in properties window.
03
Add a button, name it as Dashboard. Click on the button and in the properties window set the navigation URL. Select the Dashboard form as show below. Click ok.

Button Properties
Navigation
04
Add search control, name it srcOrder. Set height and width in properties window. This search is used to display product and supplier details of corresponding order id selected in the Dashboard Form.
05
Search Properties

For Configuring search control, add a search control and name it as srcOrder. Click on grid to get the Properties window for the Search Grid. In the properties window select SharePoint from the Dropdown for DataSource.

06
DataSource In Quick View

Click on the grid to get the popup menu, choose DataSource tab and click on New DataSource Configuration.

07
List Selection

OrderedProduct, ProductList and SuppliersList from the given set of lists and click Next.

08
Result Columns Selection

Select the Result columns that are to be displayed on the grid. Click Next.

09
Search Criteria

Enter the selection criteria as shown below.

10
Adding Relationships

Set the relationship between the two lists by selecting the common column name in Primary and Child table drop down columns as shown below and click (+ Add) button.

11
Search Result Configuration

Click Next until you reach the Search Result Configuration screen. The columns you had chosen would be shown there. You can modify the Column Header to give a user friendly name to the column. Click Finish.

MainForm Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
Rule – FormLoad

Sets current date in the label on top right through the rule Globalvariable(Now) Variable VarSum is initialized by setting the value to zero.

02
Rule Name : GetData | Trigger(s) : hdnID
Rule – GetData

Fills the search “srcOrder” with the order id passed from the Dashboard form. Sets the header background color and font color using GridSetRowStyle. Sets value in header label. Runs rule “SetColor”.

03
Rule Name : SetColor | Trigger(s) : No Trigger
Rule – SetColor

Is used to set background colors to alternative rows in search.

04
Rule Name : SetValueSearch | Trigger(s) : srcOrder
Rule – SetValueSearch

Is used to combine and set value in Search columns. Next the GridSetStyle rule is used to make the header of the search grid bold. Total value of SubTotal column is calculated and is stored in variable VarSum. Value of VarSum is assigned to the label -lblSubTotal.

05
Rule Name : CloseTab | Trigger(s) : btndashboard
Rule – CloseTab

Used to close the form.

Template Summary
Order Detail template is used to save customer orders and display details of all orders. Order details will display Order id, Sales Person, Order Date, Shipped Date and Shipped details.