Sales Viewer
Overview
Template by Vishnu Venugopal | December 15, 2015

Sales Viewer has been designed to generate graphical reports on Daily sales performance, unit sales and sales by range on the basis of Revenue by sector and Revenue by product. The purpose of this template is designed to be a reference for any person wishing to implement or any person interested in the architecture of sales viewer for the ClaySys AppForms.
In ClaySys AppForms Sales Viewer , a combobox is available to select the category. If we select the category as Revenue by sector, the statistical report will show the Daily sales performance, unit sales by sector and sector sales by range as shown in the figure.

Prerequisite(s)
  • Sharepoint 2013
Revenue By Product
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 maintains 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 depending on requirement.

SharePoint List
List NameColumn NameData Type

Sales Viewer

'Sales Viewer' list is used to configure a search control. Based on the values in this search control, the graphical data in chart control is presented.

UnitSalesSingle Line of text
DashboardSingle Line of text
RangeSingle Line of text
TitleSingle Line of text
DailySalesSingle Line of text
Design And Configuration

In ClaySys AppForms Sales Viewer , a combobox is available to select the category. If we select the category as Revenue by sector, the statistical report will show the Daily sales performance, unit sales by sector and sector sales by range. If we select the category as Revenue by Product, then the statistical report will shows the Daily sales performance, unit sales by product and Product sales by range.

List Of Forms Used
NameFunctionality
SalesViewer Form Design Rule Design 'SalesViewer' Form is used to present data in a graphical format with respect to the values in the sales viewer list.
SalesViewer
SalesViewer Form Design
01
Create Form

On clicking the New Folder option, it will create a new folder and the name will be in the edit mode. You can type a new name for the folder.

02
Rename Form

Then click on the ‘New Form’ link on the toolbar. Give an appropriate name for the form. Click ‘Save’ to save the form.

03
Form UI

You can drag and drop controls and format the styles easily.

04
Publish Form

‘Check-In Form’ to save the changes and publish to get the completed form for the end user to use. A form must be checked-out to make modifications while all aspects of the form can be examined while checked-in.

05
Datasource Tab In Quick View

Following steps will explain about the DataSource configuration of Search control.Click Search control select the New DataSource Configuration.

06
Site Selection

Select the site from the available sites. Click 'Next' to continue.

07
List Selection

Select the list from available list name. Click 'Next' to continue.

08
Select Result Columns

Select the result columns. Click 'Next' to continue.

09
Designer Criteria

Add the designer criteria in the criteria builder that should select the unique record in the List that matches the user identity criteria in the Datasource and additional and/or Query clauses can be added. Click 'Next' to continue.

10
Add Relations

If the selected lists needs any relationship then we can add their relations here. Click 'Next' to continue.

11
Look and Feel

We can change the look and feel of the search control.

12

Click 'Add Trigger' to add the trigger.

Control List
Add Trigger(s)
13
Rule with Trigger

Click ‘Create Rule’ will automatically create the FillData() rule for the search control with associated trigger.

14
Rule created

Click ‘Finish’ button to save and close the DataSource configuration process for the search control.

15
Chart Datasource Selection

Following steps will explain about the DataSource configuration of Chart control:

Before configuring the chart control, a search control should be configured whose data has to be taken for mapping the chart control.Click on the Chart control and select the DataSource.

16
Chart Type

A chart window appears. Select a suitable Chart type. Click 'Next' to continue.

17
Chart Datasource Configuration

A Chart window appears for configure the Chart source Data. Select the DataSource as a Search control whose data has to be taken for mapping the chart control. Add a Chart title and label the X and Y axis.Click 'Next' to continue.

18
Choosing Independent and dependent values

Chart window appears for configuring the Series title, Independent value path and Dependent value path. Click 'OK' to add the option.Click ‘Finish’ button to save and close the DataSource configuration process for the Chart control.

SalesViewer Rule Design
01
Rule Name : FormLoad | Trigger(s) : FormLoad
Rule - FormLoad

The rules section is the most powerful section in the AppForms. The rules can be configured using the Rules Engine.The rule named 'FormLoad', fills the search control and set the values to label controls on 'FormLoad' as trigger.

02
Rule Name : Dashboard | Trigger(s) : cmbRevenue
Rule - Dashboard

The rule named 'Dashboard' fills the search control 'srcDailySalesbySector' and sets the values to the label controls based on the value in the combobox 'cmbRevenue', on 'cmbRevenue' as trigger. Depends on the values in the search control the Chart controls will be populated. This process is converted into concise, yet readily understood rule expression statements that represent the underlying execution logic of the form as shown in the figure.

Template Summary

Sales Viewer template is designed to be a reference for any person wishing to implement or any person interested in the architecture of sales viewer for the ClaySys AppForms. In this template , chart control is used to display the Daily sales performance in an attractive graphical format.

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.

Vishnu Venugopal

Leave a Reply