Supplier List
Overview
Template by sandu | November 24, 2015

Suppliers contain a dashboard displaying details of various suppliers.This includes fields such as suppliers Contact Name, Company, Phone, Address and Country.On clicking company link a new form gets loaded, where supplier details, product details and order details of that product are displayed.On clicking the link, the Supplier id is passed to the new form which gets loaded. This id helps in the selection of required fields.

Prerequisite(s)
  • SharePoint 2013
Suppliers
Data Structure

SharePoint list is used as a DataSource for Supplier List. 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 the following columns are available in sharePoint list such as ID, Title, Modified, Created, Modified By, Created By, Attachements. 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.

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

OrderedProduct

Details of ordered products are stored within this list.

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

SuppliersList

Details of the supplier are stored in this list.

CompanySingle 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
AddressSingle line of text
CountrySingle line of text
RegionSingle line of text
CitySingle line of text
PostalCodeSingle line of text
Design And Configuration

The order of creation of forms would be Repeater form, MasterForm and then the Dashboard form. This is because click on the Company link displayed in the search grid on Dashboard Form is configured to open Master form, which contains an external form which is configured using the Repeater form.

List Of Forms Used
NameFunctionality
Repeater Form Form Design Rule Design Form that gets repeated depending on the number of product.
MasterForm Form Design Rule Design Form that gets loaded on clicking the Supplier Id link in Dashboard form.
Dashboard Form Design Rule Design Displays all the supplier details.
Repeater Form
Repeater Form Form Design
01
DataSource

Create a NewForm in the Suppliers 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 RepeaterForm. Set the Width of the form to 1200 and Height to 1000.

Add a Subform and name it hdnfrm and set the visibility to false.Add two textboxes into the subform and name them as hdnPID and hdnID.

Drag a DynamicGrid and name it dgProduct.
Drag a Search Control and name it srcProduct.

Configuring the Dynamic Grid:

Click on the grid to get the popup menu,

02
DataSource Type Selection

choose DataSource as SharePoint.

03
DG Configuration

Enter required control name, Select the control type and the column header name.Click (+).

04
DG Configuration

Similarly add all the required fields and click Next.

05
List

Choose ProductList from the lists and click Next.

06
Select

In Commands dropdown, default will be Select, click on Add button.

07
Query criteria mapping

In the query criteria mapping choose ProductId Equals hdnPID.

08
Query Value Mapping

In Query Value Mapping section, map those fields to the respective controls on the form.

09
Trigger

Click Finish to get back to the Commands Configured part and click on Add Trigger.

10
Adding Trigger

Select hdnPID as the triggers and click on Create Rule. This would set hdnPId events as the trigger for loading the DataSource and thus selects values in all fields with in the Dynamic Grid.

Click Close.

Click Finish.

11
Properties window

Configuring the Search Grid:

1. Click on grid to get the Properties window for the search Grid. In the properties window select SharePoint from the Dropdown for DataSource.

12
DataSource

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

13
List

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

14
Select Result Column

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

15
Criteria builder

Enter the selection criteria as shown below.

16
Mapping

Click Next until you reach the Search Result Configuration screen. The columns you had chosen would be shown there, Click finish.

Repeater Form Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
FormLoad Rule

GridSetRowStyle rule is used to set the Background color and font color of Dynamic Grid.

02
Rule Name : GetData | Trigger(s) : hdnPID
GetData Rule

ExecuteCommand(Select) is used to fill the data’s in the Dynamic Grid control.

FillDataSync rule is used to fill the Search control.

GridSetRowStyle rule is used to set background color and font color of Search control

03
Rule Name : SubTotal | Trigger(s) : srcProduct
SubTotal Rule

GridSetValue rule is used to do the calculations and set the value in the required column.

MasterForm
MasterForm Form Design
01
Properties

Create a NewForm in the Suppliers 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.

Add a sub form and name it hdnfrm and untick the visibility and add a textbox in the subform and name it as hdnId .

Also add a search control in to the sub form and name it as srcProduct.

Add labels in the MasterForm in order to select supplier’s details.

Add an external form and name it extProducts.

Click on the external form. In the properties window displayed on the right select

the Navigate URL by clicking the button shown below.

02
Navigation

From the pop screen select the form which has to be loaded in the external form. Here it is Repeater Form.

Then click add.

03
Properties

Configuring the first Search Grid:

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 Drop down for DataSource.

04
DataSource

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

05
List

A new Popup window opens showing the Available lists in SharePoint. Choose ProductList from the given set of lists and click
Next.

06
Mapping

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

07
selection criteria

Enter the selection criteria as shown below.

08
Search Result Configuration screen

Click Next until you reach the Search Result Configuration screen. The columns you had chosen would be shown there,Click Finish

09
DataSource

Configuring the MasterForm to select the Supplier details corresponding to the selected supplier Id in Dashboard form.

In the DataSource tab of the form, click on Create DataSource.

10
Sharepoint

Give DataSource Name as dsGetData, choose SarePoint as the DataSource Type and click Ok.

11
List

Choose Supplier List from the lists and click Next.

12
DataSource

In Commands drop down, default will be select, click on Add button.

13
criteria mapping

In the query criteria mapping choose Id Equals hdnId.

14
Mapping

In Query Value Mapping section, map those fields to the respective controls on the form.

15
Adding Trigger

Click Finish to get back to the Commands Configured part and click on Add Trigger.

16
Adding Trigger

Select hdnId as the triggers and click on Create Rule. This would set hdnId events as the trigger for loading the DataSource and thus will select the supplier details in the respective fields corresponding to Supplier id in “hdnId”

Click Close.

Click Finish.

MasterForm Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
FormLoad Rule

Sets current date in label using GlobalVariable(Now) rule.

02
Rule Name : GetData | Trigger(s) : hdnId
GetData Rule

ExecuteCommand(Select) is used to fill the labels with supplier details using the supplier id passed to “hdnId” textbox.

Fills the hidden search control with product details of corresponding supplier id.

Next action is used to check if the total row count of search is greater than 1.

If the condition is satisfied the repeater form is made to repeat that many times.

Also a product id is passed to the Repeater form using SetFormValue rule.

A variable VRepeater value is set to 1.

Next a “SetRepeterValue” rule is run.

03
Rule Name : SetRepeaterValue | Trigger(s) :
SetRepeaterValue Rule

Checks if the VRepeater value is less than the total row count of search, if yes product id value is passed to the repeated
form.

Next the VRepeater value is incremented by 1.

Again the same rule “SetRepeaterValue” is called again. This rule works as a loop.

04
Rule Name : CloseTab | Trigger(s) : btndashboard
CloseTab Rule

This rule is used to close the current form on clicking the Dashboard button on top- right of the form.

Dashboard
Dashboard Form Design
01

Create a NewForm in the Suppliers folder and open it for editing.

02
Properties Window

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.

03

Drag a search control.

04

Click on search control and name it as “srcDashBoard” in properties window on the
right.

05

Set width 790 and height 250.

06
DataSource

For the grid:

Click on grid to get the Properties window for the search Grid. In the properties window select SharePoint from the Dropdown for DataSource.

07
New DataSource

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

08
Available List

A new Popup window opens showing the Available lists in SharePoint. Choose Suppliers List from the given set of lists and click Next.

09
Result column

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

10
Condition

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

11
Columns

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.

12
Link Button

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

13

In Configure Column Links, choose Link Button for Column Type.

14
Link Navigation

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 Mater form. Choosing this form makes this available in the Form Name drop down below.

15
Link Navigation

Choose the field to be mapped in the MasterForm from the Field Name dropdown. In this case hdnId

d. In the Result Field choose ID

Click the + button to add this form to the box below.

Click Ok.

Click Finish

Dashboard Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
FormLoad Rule

Is used to fill the Dashboard search.

02
Rule Name : srcColor | Trigger(s) : srcDashBoard
srcColor

Contains 3 GridSetRowStyle rule.

First one is used to set background color for all rows in the search control.

Second one is used to set the header background color of the search control.

Third one is used to set the header font color of the search control.

Template Summary

It contains a dashboard displaying details of various suppliers.When the user clicks on a "Company name" , it navigates to a form showing the supplier details, product details and order details of that company. The data used in this exmaple are fetched from four sharepoint lists, supplierlist , Ordered Product and ProductList.

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