Invoice
Overview
Template by sandu | November 19, 2015

Invoice form is used to display a consolidated list of all orders from the Orders List in a grid format. Clicking on an OrderId brings up a detailed Invoice showing the Order details which includes Shipping  Address, Billing Address, Product Details and Total Amount for the Order.

Prerequisite(s)
  • SharePoint 2010
Details
Data Structure

SharePoint list is used as a DataSource for Invoice. 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
• ID
• Title
• Modified
• Created
• Modified By
• Created By
• Attachments

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

Ordered Product

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

Order List

Details of all orders are stored in this list.

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

List Name Functionality CustomerList

Details of the customer are stored in this list.

CustomIDSingle line of text
NameSingle line of text
FirstAddressSingle line of text
SecondAdressSingle line of text
PhoneSingle line of text
Design And Configuration

The order of creation of forms would be Invoice form and then InvoiceDashboard form. when we click on the Order Id link displayed in the search grid on InvoiceDashboard Form , it is configured to open Invoice form.

List Of Forms Used
NameFunctionality
Invoice Form Design Rule Design Shows the detailed Invoice including shipping and billing address. This form contains two search controls-srcOrder and srcProduct.The first grid shows the Order details as shown in the InvoiceDashboard. The second one shows the product details pertaining to that order.
InvoiceDashboard Form Design Rule Design Contains a search control which is used to display the details of all the orders.
Invoice
Invoice Form Design
01

Create a NewForm in the OrderDetails Folder and open it for editing.

02

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.

03
Form Designing

Add a sub form to the bottom of the form and name it hdnSubform .Un tick the visibility property of the form. This is to hide the sub form.

This form is used to add the hidden controls.

Add 3 textboxes and name them as hdntxtOrderId, hdntxtcustomerId and
hdntxtOrderProductId.

04

Add an Image control to the top left of the Invoice form.

05
Image Properties

Click on the image control and edit the properties window displayed on the right.
Add the desired image by browsing to the Image source by clicking on the button shown below.

06

Add labels to accommodate shipping and billing address.

Form Designing
Form Designing
07

Properties like width, height background color etc. of each label can be changed in the properties window displayed on the right.

08
DataSource Setting

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 Dropdown for DataSource.

09
New datasource Setting

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

10
SharePoint Lists

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

11
Columns

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

12
Condition

Enter the selection criteria as shown below.

Id Equals hdntxtOrderId

13
Column DataType

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.

14

Configuring the second Search Grid:

Add another search control and name it as srcProduct.

15
DataSource setting

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

16
New DataSource Setting

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

17
List Selection

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

18
Result columns

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

19
Selection Criteria

Enter the selection criteria as shown below.

20
list Join

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.

21
Result 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.

22
New DataSource

click again on Create DataSource.

23
SharePoint

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

24
Lists

Choose your CustomerList from the list and click Next.

25
DataSource Command

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

26
Condition

In the query criteria mapping choose Customer Id Equals hdntxtcustomerId.

27
Mapping

In Query Value Mapping section, we need to map only Name, FirstAddress,
SecondAddress.

28
Adding Trigger

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

29
Trigger

Select hdntxtCustomerId as the triggers and click on Create Rule. This would set hdntxtCustomerId events as the trigger for loading the DataSource.
Click Close.

Click Finish.

Invoice Rule Design
01
Rule Name : ForemLoadRule | Trigger(s) : FormLoad
FormLoad Rule

Sets current date in the label ontop right through the rule Globalvariable(Now)
A variable VarSum is initialized by setting the value to zero.

02
Rule Name : On_hdntxtOrderId | Trigger(s) : hdntxtOrderId
On_hdntxtOrderId Rule

The order id from the
InvoiceDashboard form is
passed to the hidden textbox named “hdntxtOrderId” in
Invoice form.This rule contains all actions that has to take place once the order id value is filled in the hidden text box
(hdntxtOrderId) ExecuteCommand(Select) rule is called in order to select the customer id corresponding to the given order id from the Customer List in textbox named“hdntxtcustomerId” Next two searches SrcProduct and SrcOrder are filled using the order id.

03
Rule Name : On_hdntxtcustomerId | Trigger(s) : hdntxtcustomerId
On_hdntxtcustomerId Rule

ExecuteCommand(Select) ruleis called in order to select customer name and shipping address from the Customer List using the customer id in
“hdntxtcustomerId” textbox.

04
Rule Name : srcordercolor | Trigger(s) : srcOrder
srcordercolor

Contains 3 GridSetRowStyle rule.First one is used to set background color for all rows in the srcOrder search.Second one is used to set the header background color of the srcOrder search.Third one is used to set the header font color of the srcOrder search.

05
Rule Name : srcProductclr | Trigger(s) : SrcProduct
srcProductclr Rule

Contains 3 GridSetRowStyle rule.First one is used to set background color for all rows in the srcProduct search.Second one is used to set the header background color of the srcProduct search.Third one is used to set the header font color of the srcProduct search. GridSetValue rule is used to calculate and set the value in the “Extended price” column in Srcproduct search.
Next a sub rule named
“srcProductclr_1 “will be
executed.This rule will work as a loop.This rule initially checks if the value of variable VarSum is less
than the total row count of srcProduct search.If the condition is satisfied
“Extended Price” value of each row is added and displayed in the SubTotal label displayed at the bottom.Also the subtotal value is added to the freight value and displayed in the total label at the bottom.

06
Rule Name : BillNameAddress | Trigger(s) : lblShipAddress2
BillNameAddress Rule

This rule is used to set the same customer address as the billing address.

InvoiceDashboard
InvoiceDashboard Form Design
01

Create a NewForm in the Invoice Folder and open it for editing.

02
Properties MianForm

Click anywhere on the form to get the form properties loaded in the Properties window.

Change the Name of the form to InvoiceDashboard. Set the Width of the form to 1200 and Height to 1000.

03

3. From Toolbox->Standard->Data drag and drop a search control onto the form.

04
Style

Click on search control and name it as “srcOrderDetails” in properties window on the
right. Set width as 790 and height 250.

05
DataSource

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

06
New DataSource

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

07

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

08
Columns

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

09
Condition

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

10
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.For Date columns change the default Type chosen as DateTime to Date if only date is to be displayed.

11
Properties

To change the Order Id column as link button, click on the Configure Column button.

12

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

13
Link Button

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

14

Choose the field to be mapped in the Invoice form from the Field Name drop down. In this case hdntxtOrderId. In the Result Field choose Order Id. Click the + button to add this form to the box below. Next choose another field hdntxtcustomerId in Field down drop down . In the Result Field choose CustomerID and click + button. Click Ok. Click Finish.

Adding Link
Invoice Forms
InvoiceDashboard Rule Design
01
Rule Name : srchColor | Trigger(s) : srcOrderDetails
Search Color Rule

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

User is provided with a dashboard of all the orders from the order list. When user clicks on the "order id" , it navigates to a form showing the detailed invoice , which includes , shipping address, billing address,product details and total amount of the order.The data is fetched from four different sharepoint lists, CustomerList ,Order List, 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