Order Details
Overview
Template by sandu | December 11, 2015

Order Details is used 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 NameColumn NameData Type

ProductList

Details of all the products are stored in this list.

CategorySingle line of text
SupplierIDNumber
IsDiscontinuedSingle line of text
ProductNameSingle line of text
UnitPriceSingle line of text
ProductIdSingle line of text
SharePoint List
List NameColumn NameData Type

OrderList

Details of all orders are stored in this list.

ShippedDateSingle line of text
ShipViaSingle line of text
CustomerIDSingle line of text
SalesPersonSingle line of text
OrderDateDate and Time
equiredDateDate and Time
SharePoint List
List NameColumn NameData Type

OrderedProduct

Details of ordered products are stored within this list.

SupplierIDNumber
ProductIDSingle line of text
QuantitySingle line of text
DiscountSingle line of text
UnitPriceSingle line of text
OrderIDSingle line of text
SharePoint List
List NameColumn NameData Type

SupplierList

Details of the supplier are stored in this list.

PostalCodeSingle line of text
AddressSingle line of text
CountrySingle line of text
RegionSingle line of text
CitySingle line of text
Contact NameSingle line of text
Contact TitleSingle line of text
PhoneSingle line of text
FaxSingle line of text
HomePageSingle line of text
CompanySingle line of text
Design And Configuration

Order Details is used 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
NameFunctionality
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 co;umns 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 columns change the default Type chosen as DateTime to Date if only date is to be displayed.

09
Order of Result Columns

To 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 displays 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 save customer orders and  display details of all orders. Order details will display Order id, Sales Person, Order Date, Shipped Date and Shipped details.

How To

A how-to is an informal, often short, description of how to accomplish a specific task. A how-to is usually meant to help non-experts, may leave out details that are only important to experts, and may also be greatly simplified from an overall discussion of the topic.

  • Add Web Part

    01

    Click on Site Settings Wheel in the upper right corner of your site and then select “Site Contents Page”.

    02
    SitePages

    Select site pages or simply pages library on site content page.

    03
    Wiki Page

    Click on “new Wiki page” to add new site page.

    04
    New Page

    Give the New page name into the pop-up window and click ‘Create’ to add new page.

    05
    ClaySys HTML WebPart

    To add a new web part, click on the ‘Insert’ tab and then click on the ‘Web Part’ button. Then select ClaySys -> ClaySys HTML Web Part.

    06
    Edit The WebPart

    Click ‘Add’ button to add the Web Part. Click on the ‘edit the Webpart’ link to edit the page.

    07
    WebPart Configuration

    A new pop-up window appears and here we can configure the ClaySys AppForms by clicking on the ‘Configure’ button.

    08
    Selecting Form

    Pop-up appears with listed published forms. We can select the appropriate form by clicking on the form and add the form by clicking on the ‘Select’ button.

    09
    WebPart

    Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ button.

    10
    WebPart

    Now you can see the web part page you just created, as shown in the following image. Click ‘Save’ button to save the changes.

    11
    Title

    The Forms added to the WebPart may contain "Claysys HTML WebPart" as Default title. The title can be changed by editing the Title in the "Appearance" after configuring the form.

  • Import Tenant

    01
    Backup and Restore

    Click on the “Back Up and Restore” on the left side of the AppForm Designer window. Then click on ‘Import Site’ -> Browse the Tenant and click Load.

    02
    Mapping Site

    Select the ‘Zip File’ and ‘Site Name’ and click ‘Next’.

    03
    Datasource Mapping

    Click ‘Next’ button.

    04

    Click on ’Import’ button . Once it done you are free to work with the form in the new site.

    List Mapping
    Import Tenant
  • Upload List Template

    01

    On the right corner of the window, click on settings.

    02
    List Template

    Click on 'Site settings' from the drop down menu , then we can see the following window appearing.

    03
    List Template Gallery

    Click on 'List template' option as shown in the above image. And we can see 'List Template Gallery'. Click on 'Files' at the leftmost corner as shown in the following image.

    04
    Uploading Document

    Click on 'Upload Document'.

    05
    Add Template

    Following Pop up will appear where we can browse a list template stored in our computer and click 'OK' button.

    06
    Template Naming

    Following Pop up will appear where we can change the name of the List Template and enter the Description as required and click on 'Save button'.

    07
    Adding an App

    Now go to the Required sub site, click 'Settings' on the right corner (as done in step '1'). Then click on 'Site Contents'. Following Screen appears in which click on 'add an app'.

    08
    Apps

    Following screen will appear where we can type the uploaded template name and click search.

    09
    Uploaded Template

    Then you can see the Uploaded template ,Click on it .

    10
    List Naming

    On clicking it ,we will get following Pop up . Enter the name for the List template and click 'Create' button.

Downloads
No downloads has been associated with this template.

sandu

SharePoint Designer at claysys

Leave a Reply