Overview

Customer List is used to display the details of the various customers. Customer details include Name, Address, Phone number and Customer id. In the basic form details of 6 customers gets displayed. On increasing the number of customer, more forms will be repeated so as to include details of more customers.

DataStructure in SharePoint
Lists Used

List Name	Functionality
CustomerList	Details of the customer are stored in this list.

List Details
CustomerList

Column Name	Data Type
CustomID	Single line of text
Name	Single line of text
FirstAddress	Single line of text
SecondAddress	Single line of text
Phone	Single line of text

Creating and Configuring the Forms
List of Forms used

Form Name	Functionality
MasterForm	· MasterForm contains an external form which is used to store the form to be repeated. · It also contains a search control used to fill all details of the customer with the Customer List.
RepeaterForm	· RepeaterForm contains 6 Border controls. · Each border control contains 5 labels for displaying 5 fields(Name,Address,City,Phone number,Customer Id)

The order of creation of forms would be RepeaterForm and then the MasterForm. This is because RepeaterForm is configured in the external form used in MasterForm and this form is made to repeat in the MasterForm as required. The best approach would be to complete the form design of all forms before starting on the rules.

Form Design- MasterForm

• Create a New Form in the CustomerList 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.Tick Auto Height in order to adjust the height of the form with respect to the controls in the form.

• Drag a label to the center of the form, in first row and name it “CustomerList”
• Drag an External Form in the next row and name it “extCustomer”
• Click on the external form. In the properties window displayed on the right select the Navigate URL by clicking the button shown below.

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

• Drag a search control and name it “SrcMaster”.
• Name can be given to the controls by clicking on it and editing the “Properties window “displayed on the right side.

Data Source Setting in MasterForm
For the grid:

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

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

• A New Popup window opens showing the Available lists in SharePoint. Choose CustomerList from the given set of lists and click Next.

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

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

• 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

Form Design-Repeater Form

• Create a New Form in the Customer List 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.
• Tick Auto Height in order to adjust the height of the form with respect to the controls in the form.
• RepeaterForm contains 6 Border controls. Border and background color for each border can be set in the properties window.

• Set Each border control contains 5 labels for displaying 5 fields(Name,Address,City,Phone number,Customer Id)

 

Adding Rules to the form
Rules of MasterForm are given below.

Sl.no	Rule Name	Trigger	Functionality
1.	FormLoad	FormLoad	Fills the search control with all data from customer list. Runs the Repeater rule.
2.	Repeater	No Trigger	Checks if the total row count of search is more than 6 If total row count is more than 6, the Repeater form is made to repeat (total row count/6) times. Then the variables VarInitial, VarGrid, VarAdGrid and VarSetGrid are set to value 1. Runs the “SetFirstGridvalues “rule and “AdditionalGridvalues” rule. If total row count is less than 6, Set variable VarInitial and VarGrid value to 1 and Runs“SetFirstGridvalues “rule
3.	SetFirstGridvalues	No Trigger	Checks if the VarGrid value is less than or equal to 6 and VarInitial is less than the total row count of search. If the condition is true name is set to label controls within the border through (VLabelName=lblHeader+VarGrid) rule. VLabelName is the variable which is used to temporarily store the label control name. Next using SetFormValue rule label controls within the border in Repeater form are assigned values form search control. (Name, address, etc.). Next the value of VarInitial variable and VarGrid variable is incremented by 1. Again run the same “SetFirstGridvalues” rule. This loop runs till all the fields in the basic Repeater form get filled with data from the search.
4.	AdditionalGridvalues	No Trigger	Initially checks if the VarAdGrid value is less than or equal to (TotalRowCount/6). VarAdGrid variable is used to get the count of repeater forms. Next if the above condition is satisfied, label controls in the repeater form are given name and the values are assigned just as in the “SetFirstGridvalues” rule. VarSetGrid variable is used to set name for labels. Each time all the controls within the repeater form gets filled VarAdGrid value gets incremented by 1. This rule works as long as the VarAdGrid value is less than or equal to the number of required repeater forms.

Rule: FormLoad

Rule: Repeater

Rule: SetFirstGridvalues

Rule: AdditionalGridvalues

How to use the list template

Uploading List Templates

List templates that were downloaded to a file on the file system can be uploaded to the list template gallery. To perform the following steps, you must have Read permission to the folder or network share that contains the list template file. Before uploading the list template, it should be added to the list template gallery of the root site. Following steps will explain about how to add the list template in to the list template gallery.

• On the Site Actions menu, click ‘Site Settings’.

• In the Galleries column, click List templates. This option appears only to users who have the Manage Lists permission. Site owners have this permission by default.

• The List Template Gallery page appears. Select Files and click ‘Upload Document’.

• Either type the path or file name (including the file extension) of the list template that you want to upload, or click ‘Browse’ to select the file. Choose whether to overwrite the existing files. By default, the ‘Overwrite existing files’ check box is selected.

• Click ‘OK’ to choose the file.
• A pop-up appears to edit the name, title and description of the list template.

• Click ‘Save’ to include the list template into the list template gallery.
• Once the list template is added to the list template gallery, we can create a new list using the list template uploaded. Following steps explains how to create a new list using list template.
• From the Site Actions drop-down menu in the top right, select ‘Site Contents’ of your site.

• Click ‘add an app’

• Find the list template that was uploaded.

• Click on the list template to use for this site

• Pick a name for the new list. We can add this app multiple times with a unique name.

• Click on the ‘Create’ button. A list has now been created using the list template.
• Similarly create all other lists using list template.

Import Tenant

Following steps will explain about tenant import.

• Open the ‘Backup and Restore’ option in AppForms in the destination site and click on the ‘import site’ tab.

• Select the backup file we had saved from the source site.
• Once the file is selected, click on the load button.

• This will show you the different sites that were exported from the source site. If there are more than one site content saved, then you can map each site in backup file to different sites in the current site. Select the required site content that needs to be restored and select the destination site in the current site as shown below. Once we are done with the backup mapping, click on the next button to proceed with the import.

• Now we will have to remap the sites we had used in the source website to the actual site in the target site. The drop down will show you the sites/sub sites to help you with the data source mapping. Click ‘Next’ to continue.

• Click ‘Import’ to continue.

• This will import all the site content we had backed up from the source site and we are ready to work with the forms in the current site.

 Create a WebPart Page

Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a webpart page, follow these steps:

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

• Select “Site Pages” or simply pages library on Site Contents Page.

• Click on “New Wiki Page” to add new site page.

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

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

• Click ‘Add’ button to add the WebPart.
• Click on the ‘edit the Webpart’ link to edit the page.

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

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

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

• Click ‘Save’ button to save the changes.

• Below figure shows the form after WebPart configuration.

Design Document for WebMail

Introduction
Webmail is web-based email accounts. These are usually free email accounts that are operated from a website. Webmail allows the users to access their emails as long as they have access to an Internet connection and a web browser. The purpose of this document is to be a reference for any person wishing to implement the Webmail Template using the ClaySys AppForms or any person interested in how to configure the AppForms to create a web mail Template. Here is an image what the webmail template dashboard we are going to be designing looks like.

On the webmail Dashboard following functionalities are being added:

• Inbox: Allows you to view the received mails in inbox.
• Send Items: Allows you to view the mails you have sent.
• Drafts: Allows you to view the mails you have saved as draft.
• Compose Mail: Allows you to write a mail. On clicking the following icon we can compose a mail: Here is the image of what the compose mail screen looks like:

On compose mail screen following functionality is added:

• Address Book: On clicking ‘AddressBook’ button following popup will appear in which you can select the recipient address and click ‘OK ‘ button .The selected recipient address will be added to the ‘To’ address textbox in the compose mail screen.

• Send Button: It is used for sending mails.

After filling the mail body, subject and ‘To’ Address you can click on the Send Button for sending mail.

• Pre-Requisite: SMTP should be configured with the particular SharePoint version for sending the mail.
• SaveAsDraft: This button allows you to save a mail as draft.

On ‘AddressBook’ pop-up following functionality is added:

• AddNew: On clicking ‘AddNew’ button following popup will appear in which you can Add a new mail ID to your AddressBook.

Creating the Form

Steps to create a new form
Folders are used to store and organize forms that have a logical association or relationship. To create a new form click ‘New Folder’ button on the toolbar of the designer.

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

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

• You can drag and drop controls format the styles easily. ‘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.

Following are the controls we used here in designing the above Webmail dashboard form:

• External Form Control
• TreeView
• Combo Box
• Image Buttons

Similarly we can create all other forms required for the webmail template. Following are the forms required:

• Webmail dashboard (as the image shown above).
• Compose mail (Screen where user can write a mail).

• frmMails (This form contains a search which shows all the mail items as a list).

• MailView (This form is designed to show each mail details using label controls).

• Address ( This form is the pop up shown when we click on the Address button in webmail dashboard).

• frmAddNewAdresses (This form is to add new mail ID to the Address book).

Steps for Configuring search Control
Here are the steps for configuring Search control referring to the form ‘frmMails’.

• From the ‘Toolbox’ at right side of the window , drag and drop the search control, which comes under the ‘Data’. Enter the name for Search control .

• On Clicking the search control , a pop up appears click on ‘DataSource’.

• Click on ‘New DataSource Configuration’.

•  Select the List from the available list and click ‘Next’ button as shown in the image.

• Select the Result columns Which you want to show in the search and click ‘Next’ button.

• Give the condition for the Selection of values in the search as shown in the image. And click ‘Next’ button.

• Here you can specify the column header, width of each column , the order in which each column should appear in search and other similar settings of columns. And click ‘Finish’ button.

Steps for External Data sources Configuration
Here are the steps for configuring External Data source referring to the form ‘frmAddNewAdresses’.

• Click on ‘DataSource’ and then click on ‘Create DataSource’ as shown in the image.

• Enter the name for the DataSource ,Select the ‘DataSource Type’ and click ‘OK’ button. As shown in the image.

•  Select the List from the available list and click ‘Next’ button.

• Select the command as ‘Insert’ or ‘select’ as your requirement and click ‘Add’ button.

• Enter the Command Title and enter the mapping values as shown in the image and click ‘OK’ button.

• Click ‘Finish’ button . Thus a new external data source has been created.

Rules Configuration
Rules in each form are being explained below. Initially to create a rule you need to click on ‘Create Rule’ and enter a name for the new rule.

Also you can add trigger to the rule by selecting the triggers as shown in the image below.

Rules in “WebmailDashboard” Form:

Rule No.	Rule Name	Trigger	Functionality
1	ComboMail	imgbtnWebMail	The visibility of combobox is set to true and “[Select]” is removed from the combobox.
2	Visiblility	cmbWebMail	After Selecting a value in the combobox , it should not be seen so on cmbWebMail trigger  the visibility of combobox is set to false.
3	On_TreeView	hdnSelectedItem	On clicking each items on the TreeView , corresponding mails should be loaded in the External form. The external form used is “extMail”. While clicking on the TreeView the hidden control “hdnSelectedItem” will get the selected item of the tree and using ‘setform’ rule this value is passed  to the hidden control “hdnStatus” in the form “frmMails” in the external form.
4	On_ComposeBtn	imgbtnComposeMail	On clicking the image button for compose mail, the form “ComposeMail” is loaded in the external form.
5	ViewMail	hdnMailViewID	On getting values in the hidden control “hdnMailViewID” we use the rule to load the form “MailView” in the external form and pass the value of hidden control “hdnID” to the hidden control “hdnMailViewID” in the form “MailView”.
6	On_Formload	FormLoad	On formload external form is loaded with the form “frmMails”. And temporary variable ‘vTemp’ is set to zero.
7	SelectedItem_Value	tvWebMail	On clicking TreeView control its selected item value is passed to the hidden control “hdnSelectedItem”.
8	Print	imgbtnPrint	To print the page on clicking the image button of print.
9	SetMailToValue	hdnMailTo	Rule to pass the value from the current form control “hdnMailTo” to the control “txtTo” in “MailView” which is loaded in the external form.

Rule 1: ComboMail

Rule 2: Visiblility

Rule 3: On_TreeView

Rule 4: On_ComposeBtn

Rule 5: ViewMail

Rule 6: On_Formload

Rule 7: SelectedItem_Value

Rule 8: Print

Rule 9: SetMailToValue

• Rules in “Address” Form:

Rule 1: OnFormLoad

Rule 2: On_OkBtn

Rule 3: On_CancelBtn

Rule 4: On_srcSddressBook


Above two images are the part of a single rule named ” On_srcSddressBook”. The sub rule named “EachRow” is shown in second image.

Rules in “frmAddNewAddress” Form:

Rule No.	Rule Name	Trigger	Functionality
1	OnSubmitBtn	btnSubmit	Rule for Executing the “Insert” command. And if  you want to maintain the fileUpload name you can store it in the hidden control “hdnFupName”.
2	On_ExecuteComplete	Execute Complete	Only after the successfull insertion of mail ID in the list , message box is to be shown and Popup window is to be closed.

Rule 1: OnSubmitBtn

Rule 2: On_ExecuteComplete

Rules in “frmMails” Form:

Rule 1: On_Formload

Rule 2: FillSearch

Rule 3: ValueSet

Rules in “MailView” Form:

Rule No.	Rule Name	Trigger	Functionality
1	Select	hdnID	Execute the “select” command from list and shows the details of a mail.
2	Send	btnSendMail	Functionality for sending mail
3	SaveAsDraft	btnSave	Functionality for saving mail as draft.
4	On_hdnStatus	hdnStatus	Checks whether the mail is a draft . if it is then only subform containing the send button etc. Should be visible.

Rule 1: Select

Rule 2: Send

Rule 3: SaveAsDraft

Rule 4: On_hdnStatus

• Rules in “ComposeMail” Form:

Rule 1: setMailTo

Rule 2: SendMail

Rule 3: SaveAsDraft

How To Use This Template

Steps To Upload list Template

• on the right corner of the window click on settings.

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

• 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.

• Click on ‘Upload Document’.

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

• 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’.

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

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

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

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

Steps to Upload Tenant

• 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.

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

• Click ‘Next’ button.

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

Step to Create a Web Part Page

Here are the steps for configuring External Data source referring to the form ‘frmAddNewAdresses’.

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

• select site pages or simply pages library on site content page.

• Click on “New Wiki Page” to add new site page.

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

• 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.

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

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

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

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

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

Design Document for Hotel Booking

Introduction
Online hotel booking system provides ample tolls that help hoteliers increase their online exposure and drive up revenue. One of the biggest advantages of our booking engine is the filtering of hotels with multiple criteria. The purpose of this document is designed to be a reference for any person wishing to implement or any person interested in the architecture of the controls for the ClaySys AppForms or how to configure the AppForms to create   a hotel booking template. Please find below user view of hotel booking template:-

Dashboard:-

On the Dashboard following functionalities are being added:-

• Select Location of Hotel
• Country Automatic generate on the basis of Location
• Select Check in and Checkout date
• Select Rooms, Adults and Children

On clicking ‘Search’ button, following screen will be displayed

In Search result form, following functionalities are being added:-
Can search hotels with:-

• different rate
• different City and Country

It is designed to guide development and design in ClaySys AppForms, including:-

• Form design
• Data Source configuration
• Rules Configuration
• Uploading List Template
• Uploading Tenant
• Create a new web part page

Create the form

Form Designing

• Folders are used to store and organize forms that have a logical association or relationship. To create a new form click ‘New Folder’ button on the toolbar of the designer. On clicking the New Folder option, it will create a new folder and the name will be in the edit mode. You can type in the new name for the folder.

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

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

‘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.

There are three forms in this template. Named as:-

• “HotelDashboard”
• “SearchResult”
• “HotelDetail”

“HotelDashboard” form contains following controls:-

• Combo box
• TextBox
• DateTimePicker
• Button

“SearchResult” form contains following controls:-

• External form
• Subform
• Combo box
• TextBox
• Button
• Label

“HotelDetail” form contains following controls:-

• Image
• HyperlinkButton
• Subform
• Label

Data Source Configuration
Following steps will explain about the Data Source configuration of Combo Box.

• Click on the Combo Box control and click the Data Sources tab to edit the Data Source.

• A pop-up window appears to select the item source. Select the Item Source as ‘SharePoint’.  From the Data source Wizard, select respective list name and click on ‘Next’ button.

•  While click on Next button getting below screen. Fill any criteria for the combo box.

• While click on Next button getting below screen, we can select value member and display member for the data source

• While click on Next button getting below screen, we can add trigger and comb box sorting order. Click on ‘Finish’ button

•  Following data shows the combo box in preview.

• Data Source operation for ‘Select’ is now defined.

Rules Configuration

• “HotelDashboard” contains following rules

Rule No	Rule Name	Trigger	Functionality
1	On_FormLoad	FormLoad	Value populated in ‘cmbcity’ and ‘cmbcountry’. Remove default value of ‘cmbRooms’, ‘cmbAdults’ and ‘cmbchild’. Add one day to ‘dtpChkIn’ date control
2	On_cmbCity	CmbCity	Finding Country name and Number of locations
3	ToDateSetting	dtpChkIn	Adding two days to dtpchkIn and set this value to dtpChkOut
4	BtnSearch	btnSearch	If validation success, open resultant form

Rule 1: On_FormLoad


Rule 2: On_cmbCity

   Rule 3: ToDateSetting

Rule 4: BtnSearch

• “SearchResult” form contains following rules

Rule No	Rule Name	Trigger	Functionality
1	FormLoad	FormLoad	Loads ‘Hotel Details’ form by using an external form control. Combo boxes are  filling by using Filldata function
2	On_hdnCity	hdnCity	Loads repeating forms based on search criteria
3	SelectRepeat	hdnRepeatLoop	Trigger set to ‘HotelDetail’ form on the basis of Hotel_ID
4	SearchRule	btnApply	Hotel searching based on City and Country
5	RemoveRule		It will remove old repeated forms on the basis of new search criteria
6	RemoveRuleLoop		Part of  Rule No 5
7	On_cmbCity	CmbCity	Country value select on the basis of City combo box
8	SetValueToCountry	hdnSCountry	Part of Rule No 7
9	HomePageNavigation	btnHome	Navigate to Home page

Rule 1: FormLoad

Rule 2: On_hdnCity

Rule 3: SelectRepeat

Rule 4: SearchRule

Rule 5: RemoveRule

   Rule 6: RemoveRuleLoop

   Rule 7: On_cmbCity

Rule 8: SetValueToCountry

Rule 9: HomePageNavigation

• “HotelDetail” form contains following rules

Rule 1: On_hdnID

Rule 2: SetHotelNameTOHyperLink

   Rule 3: ClearRule

How to use this template

Uploading List Template
Following lists are used for creating the template form.

• HotelDetail
• HotelLocation

Please do the following steps for uploading list templates

• Click on settings  at the right corner of the window

• Click on ‘Site settings’ from the drop down menu, we can see the following window appearing.

• Click on ‘List template’ option as shown in the above image. And we can see ‘List Template Gallery’. Click on ‘Files’ at the left most corner as shown in the following image.

• Click on ‘Upload Document’

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

• 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’.

• Now go to the required sub site, click ‘Settings’ on the right corner.  Then click on ‘Site Contents’.  Following Screen appears in which click on ‘add an app’.

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

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

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

Uploading Tenant

• Click on the ‘Backup and Restore’ on the left side of the App form Designer window.Then click on ‘Import Site’ -> Browse the Tenant and click Load.

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

• Click ‘Next’ button

• Click on ’Import’ button

• Backup re stored successfully

Create a Web Part Page
Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a web part page, follow these steps:-

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

• Select “Site Pages” or simply pages library on Site Contents Page.

• Click on “New Wiki Page” to add new site page.

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

• 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.

• Click ‘Add’ button to add the WebPart.
• Click on the ‘edit the WebPart’ link to edit the page.

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

• 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.

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

• Click ‘Save’ button to save the changes.

• Below figure shows the form after WebPart configuration.

Design Document for Sales Viewer

Introduction
Sales Viewer has been designed to generates 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 document 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 combo box is available to select the category. If we select the category as Revenue by sector, the statistical report will shows the Daily sales performance, unit sales by sector and sector sales by range as shown in the below figure.

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 as shown in the figure.

It is designed to guide development and design in ClaySys AppForms, including:

•  Creating the form
• Form design
• Data Source configuration
• Rules
• How to use this template
• Uploading List Templates
• Import tenant
• Create a web part page

Creating the form
Form Design

• 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.

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

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

•  ‘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.

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

• Click Search control select the New DataSource Configuration.

• Select the site from the available sites. Click ‘Next’ to continue.

• Select the list from available list name. Click ‘Next’ to continue.

• Select the result columns. Click ‘Next’ to continue.

• 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 Data source and additional and/or Query clauses can be added. Click ‘Next’ to continue.

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

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

• Click ‘Add Trigger’ to add the trigger.

• We can select and add the trigger by clicking the check box corresponding to the control.

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

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

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.

• A chart window appears. Select a suitable Chart type. Click ‘Next’ to continue.

• A Chart window appears for configuring 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.

• 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.

Rules
The rules section is the most powerful section in the AppForms. The rules can be configured using the Rules Engine. Following are the rules associated with the application.

• The rule named ‘FormLoad’, fills the search control and set the values to label controls on ‘FormLoad’ as trigger.

•  The rule named ‘Dashboard’ fills the search control ‘srcDailySalesbySector’ and sets the values to the label controls based on the value in the combo box ‘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.

How to use this template

Uploading List Templates
List templates that were downloaded to a file on the file system can be uploaded to the list template gallery. To perform the following steps, you must have Read permission to the folder or network share that contains the list template file. Before uploading the list template, it should be added to the list template gallery of the root site. Following steps will explain about how to add the list template in to the list template gallery.

•  On the Site Actions menu, click ‘Site Settings’.

• In the Galleries column, click List templates. This option appears only to users who have the Manage Lists permission. Site owners have this permission by default.

•  The List Template Gallery page appears. Select Files tab and click ‘Upload Document’.

• Either type the path or file name (including the file extension) of the list template that you want to upload, or click ‘Browse’ to select the file. Choose whether to overwrite the existing files. By default, the ‘Overwrite existing files’ check box is selected.

• Click ‘OK’ to choose the file.
• A pop-up appears to edit the name, title and description of the list template.

•  Click ‘Save’ to include the list template into the list template gallery.

Once the list template is added to the list template gallery, we can create a new list using the list template uploaded. Following steps explains how to create a new list using list template.

• From the Site Actions drop-down menu in the top right, select ‘Site Contents’ of your site.

• Click ‘add an app’

•  Find the list template that was uploaded.

• Click on the list template to use for this site

• Pick a name for the new list. We can add this app multiple times with a unique name.

• Click on the ‘Create’ button. A list has now been created using the list template.

Import tenant
Following steps will explain about tenant import.

• Open the ‘Backup and Restore’ option in AppForms in the destination site and click on the ‘import site’ tab.

• Select the backup file we had saved from the source site.

• Once the file is selected, click on the load button.

• This will show you the different sites that were exported from the source site. If there are more than one site content saved, then you can map each site in backup file to different sites in the current site. Select the required site content that needs to be restored and select the destination site in the current site as shown below. Once we are done with the backup mapping, click on the next button to proceed with the import.

• Now we will have to remap the sites we had used in the source website to the actual site in the target site. The drop down will show you with the sites/sub sites to help you with the data source mapping. Click ‘Next’ to continue.

• Click ‘Import’ to continue.

• This will import all the site content we had backed up from the source site and we are ready to work with the forms in the current site.

Create a Web Part Page
Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a web part page, follow these steps:

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

•  Select “Site Pages” or simply pages library on Site Contents Page.

• Click on “New Wiki Page” to add new site page.

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

• 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.

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

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

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

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

• Click ‘Save’ button to save the changes.

• Below figure shows the form after Web Part configuration.

1.Introduction:

ClaySys AppForms Demo template document deals with, 1. Pre-Requisite 2. How to create a main form using different controls 3. How to create the home page to display patient details 4. How to rename a control 5. How to add a image to image control or image button 6. How to configure a search control 7.Adding a new patient Form 8. Query page 9.View comments page 10. To view daily schedule 11. How to use this template.

What are we going to create using this document?
Form1:

Form 2:

Form 3:

Form 4:

Form 5:

1 Pre-Requisite:

1. Launch the AppForms URL.
2. Create a New Folder by clicking on new Folder Tab.
3. Inside the Folder create a new form by clicking on new Forms Tab.
4. Browser Preferred – IE8,9,10,11.

2 How to create a main form using different controls

2.1 Controls used in the form are

• Image
• Image Button
• Sub Form
• Label
• Search Control
• Text box as hidden control (visibility is set as false).

3 How to create the home page to display patient details:
3.1 Steps to achieve the above UI

1.Select the first column and by using span option span it to n number of columns, eg: 5.
2.Drag Sub-Form from Group to the spanned column.
3.Inside the sub form add columns. In one of the columns add one image control.

4.Add one more Sub-form inside one of the columns of the first inserted Sub-form.
5.Add two columns to the second Sub-form.
6.Drag and drop one image control and label control to the added columns respectively.
7.Add another label control to the 1st Sub-form.

8.Drag and drop 3 Image button controls.

9.Drag and drop a label control and change the name as Patient.
10.Drag and drop an image button.
11.Drag and drop a combo box.
12.Drag and drop a search control.

13.Image button controls are dragged and dropped.

14.Drag and drop the sub-form.
15./ 16. Drag and drop the image control.
17.Drag and drop the label control.

18.Drag and drop the textbox control.

4 How to rename a control:
4.1 Steps to Rename control.

1.Click on the control.
2.A Quick menu will be displayed.
3.Edit the name of the control in the column name field.
4.We can make the control Visible/ Invisible by selecting the check box respectively .
5.The control can be enabled /disabled by selecting the check box respectively.
6.We can also set the Width and Height of the control.

5 How to add a image to image control or image button:
5.1 Steps to add a image to image control or image button.

1.Select the image/image button control.
2.In the right side Properties drop down select Image source.
3.Browse and select the image from the stored location.
4.The image will be added to the image source and displayed in the image/image button control.

6 How to configure a search control:
6.1 Steps to configure a search control:

1.Create a list in share point with required field.
2.Click on the search control.
3.Quick menu will be opened.
4.Select the Data Source tab.
5.Click on edit Data Sources Configuration hyperlink.
6.Select the Site by clicking the radio button from the pop-up and click on Next button.

7.Select the list created in the share point and click on next button.

8.Select the columns in the list which should be displayed in the search control.
9.Select the criteria if necessary / click on next button.
10.Select the Relation , if you need to join 2 or more tables.
11.In search result configuration window, you will be allowed to edit the column header ,type and order to display the columns.

12.Click on finish button. The search control will be configured.
13.In general properties select the Search On load option and the search will be filled when the form is launched. Search can also be filled using various methods.

7.Adding a new patient Form:

7.1 Controls used in the form are

• Image
• Image Button
• Sub Form
• Label
• Tab Control
• Text box
• Check box
• Date Time Picker
• Button

7.2 Steps to create this form:

1. Follow the same steps used in first form to create the header part.
2. Place a label control by spanning columns and change the name as New Patient.
3. Change the header Name of the Tab control to Patient Information – New Patient.
4. Properties –> Tab Collection –> Items –>
5. Enter the name in Tab Item Name and click on OK button.
6. The name of the tab control will be changed.
7. Drag and drop controls as shown in the image above.
8. The UI design of New Patient Form is completed.

7.3 Save Functionality in the Form:

1. Button is dragged and dropped.
2. Create a list in SharePoint.
3. Add a data source to the form and name it.
   Click On DataSources –> Create DataSource –> Enter Name –> Select the data source as SharePoint –> Click Ok –> Select the list created in the share point –> Click on Next button.
4. Select Insert option from the drop down and click on add button.
5. Map the columns of list to the design controls and click on OK button.
6. Click on Add Trigger Button:  
7. We had named the save button as btnSave 
8. Select btnSave as trigger and click on Create Rule button.
9. The rule will be created–> Click on close button.
10. Click on Finish button
11. The data source will be added
12. By using this form we will be able to insert the data into the List created in the share point. In this form New patient details will be added.

8 Query Form:

8.1 Controls used in the form are

• Image
• Image Button
• Sub Form
• Label
• Button

8.2 Steps to create this form:

1. Create the header by using the same steps used in the above forms.
2. Span columns and drop a label control. Name the label as Queries.
3. Change the back ground color to eg: Green. The back ground color option is present in Properties–> Style –> Background color  
4. Complete the design as shown in the design.

9.View comments page:

9.1 Controls used in the form are

• Image
• Sub Form
• Label
• textbox
• Button

9.2 Steps to achieve the above Form

1. Drag and drop all the controls and achieve the Form UI design.
2. For Close button, Click on the button –> Quick menu will be displayed–> Select Rule/Attributes –> Create rule –> Click on start –> Add an action –> Write rule CloseTab().
3. This form should be shown as a pop-up when the VIEW button in   Query Form Is Clicked. So Is Pop-Up option should be selected in this form. Click on any part of form–>Properties –> Form Details–> Is Popup =True. 

The Form will be displayed as popup.

10 To view daily schedule Form:

10.1 Controls used in the form are

• Image
• Image Button
• Date Time Picker
• Label
• Search Control

10.2 Steps to achieve the above Form

1. Drag and drop all the controls and achieve the Form UI design.
2. In this a label for error message and search control is placed and marked as Invisible.
3. When the Form is loaded, the date time picker displays the current date. This is achieved using a rule.

Rules –> New Rule –> Add Action –> dtpselectdate.Value=GlobalVariable(Now)

dtpselectdate.Value=GlobalVariable(Now) means

dtpselectdate.Value – Value Of date time picker. the name of date time picker is given as dtpselectdate in form design.

GlobalVariable(Now) – this selects the current date.

4. FormLoad is set as trigger. In Default Tab –> form load will be displayed.
5. When the Form is loaded, if there is any appointment scheduled for the current date the search control will be displayed with data.
6. If there is no appointment scheduled for the current date, the error message will be displayed.
7. This is achieved using rules.
8. Have Date Time Picker as trigger .

Rules:

Create a new Rule –> Add a Action Rule – FillDataSync(Search3)

Add a decision:

If

Search3.TotalRowCount>0   -> Search3.Style.Visibility=True

-> lblError.Style.Visibility=False

Else

   -> Search3.Style.Visibility=False

   -> lblError.Style.Visibility=True

9. The Form Design is complete.

11 How to use this template:

11.1 Uploading List Template:

The below given list is used for creating the template form.

Doctor_Final

11.1.1 Steps for uploading list templates

1. Click on settings at the right corner of the window. 
2. Click on ‘Site settings’ from the drop down menu, we can see the following window appearing.  
3. Click on ‘List template’ option as shown in the above image. And we can see ‘List Template Gallery’. Click on ‘Files’ at the left most corner as shown in the following image. 
4. Click on ‘Upload Document’ 
5. Following Pop up will appear where we can browse a list template stored in our computer and click ‘OK’ button. 
6. 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’.  
7. Now go to the required sub site, click ‘Settings’ on the right corner. Then click on ‘Site Contents’. Following Screen appears in which click on ‘add an app’.  
8. Following screen will appear where we can type the uploaded template name and click search.  
9. Then you can see the Uploaded template, Click on it.
10. On clicking it, we will get following Pop up. Enter the name for the List template and click ‘Create’ button

11.2 Uploading Tenant:
11.2.1 Steps for Uploading Tenant:

1. Click on the ‘Backup and Restore’ on the left side of the App form Designer window .Then click on ‘Import Site’ -> Browse the Tenant and click Load. 
2. Select the ‘Zip File’ and ‘Site Name’ and click ‘Next’  
3. Click ‘Next’ button
4. Click on ’Import’ button  
5. Backup re stored successfully.  

11.3 Creating a Web Part page:

Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a web part page.

11.3.1 Steps to create a web part page:

1. Click on Site Settings Wheel in the upper right corner of your site and then select “Site Contents Page”. 
2. Select “Site Pages” or simply pages library on Site Contents Page. 
3. Click on “New Wiki Page” to add new site page. 
4. Give the New page name into the pop-up window and click ‘Create’ to add new page.  
5. 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. 
6. Click ‘Add’ button to add the Web Part.
7. Click on the ‘edit the Web part’ link to edit the page. 
8. A new pop-up window appears and here we can configure the ClaySys AppForms by clicking on the ‘Configure’ button.  
9. Pop-up appears with listed published forms. We can select the appropriate form by click on the form and add the form by clicking on the ‘Select’ button.  
10. Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ to continue. 
11. Click ‘Save’ button to save the changes.
12. Below figure shows the form after WebPart configuration.

IntroductionCascadingDropDown enables a common scenario in which the contents of one combobox depends on the selection of another combobox. The Cascading Dropdown Menu allows you to drill down through hierarchical data by using one dropdown menu as a filter into the next. The purpose of this document is designed to be a reference for any person wishing to implement or any person interested in the architecture of the cascading dropdown for the ClaySys AppForms or how to configure the combo boxes in AppForms with cascading dropdown effect.

The Dashboard form contains an Add New button; it will navigate to a popup form. In that form we can create a new cascading combination. When the user selects maker from “Make” combo box, model of the car should populated in “Model” combo box and when the user selects model, color of the car should be populated in “Color” combo box. Click Save to save the values and it will reflect in the dashboard form. We can update the values by clicking on the ‘Edit’ link provided in the dashboard form. The values in the combo boxes are populated from SharePoint lists. The ‘Make’ list contains the car maker names. The ‘Model’ list contains the model of the car and the ‘Color’ list contains the color of the cars.

It is designed to guide development and design in ClaySys AppForms, including:

• Creating the form
• Form design
• DataSource configuration
• How to use this template
• Uploading List Templates
• Import tenant
• Create a webpart page

Creating the form
Form Design
Folders are used to store and organize forms that have a logical association or relationship.To create a new form click ‘New Folder’ button on the toolbar of the designer.

• 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.

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

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

• ‘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.

DataSource Configuration

Following steps will explain about the DataSource configuration of ComboBox control.

• Click on the ‘Make’ ComboBox and select the DataSources tab to edit the DataSource.

• A pop-up window appears to select the item source. Select the appropriate Item source and click ‘OK’ to continue. Here we select the Item Source as ‘SharePoint’

• Select the SharePoint List in the next window. Click ‘Next’ to continue.

• Click “Add” button in the criteria window to Write the appropriate criteria for filling the ‘Make’ ComboBox in the Criteria Builder . Click ‘Next’ to continue.

• Select the value member and display member from DataSource wizard. Click ‘Next’ to continue.

• Click “Add Trigger” in the miscellaneous window.

• We can select and add the trigger by clicking the check box corresponding to the control.

• Click ‘Create Rule in the Manage Rule window to create FilldataSync( ) rule associated with the corresponding control/Event as trigger. Choose whether to Sync the command. By default, the ‘IsSync’ check box is

• If you need to display items in any sorting order, select the column name from “Column” and select the Order. Click “Add” button without fail. Click ‘Finish’ to end the process.

• Click “Preview”. You can see that Maker names are populating in combo box.

• When the user selects ‘Acura’ from Make, Model names should be populated in the ‘Model’ combo box.
• To configure the ‘Model’ ComboBox follow the steps for configuring the ‘Make’ Combo Box up to the list selection.
• Give the criteria for filling the ‘Model’ combo box as given below .

• Click “Next” to continue. Follow the configuration steps of ‘Make’ combo box to add the trigger for ‘Model’ combobox. Add trigger as ‘Make’ and complete the configuration.
• When you select the value from the combobox ‘Make’, the ‘Model’ will populate the Names of corresponding Maker. Click “Preview”. You can see that Model names are populating in combo box.

• Click ‘Color’ and follow above steps that you followed for ‘Make’ and ‘Model’ upto selecting the List.Give the criteria for filling the combo box ‘Color’.

• Give ‘Make’ and ‘Model’ as a trigger and complete the configuration.

• Click “Preview”. You can see the Color names are populating in the combo-box, corresponding to the values in the other combo boxes.

How to use this template
Uploading List Templates

List templates that were downloaded to a file on the file system can be uploaded to the list template gallery. To perform the following steps, you must have Read permission to the folder or network share that contains the list template file. Before uploading the list template, it should be added to the list template gallery of the root site. Following steps will explain about how to add the list template in to the list template gallery.

• On the Site Actions menu, click ‘Site Settings’.

• In the Galleries column, click List template This option appears only to users who have the Manage Lists permission. Site owners have this permission by default.

• The List Template Gallery page appears. Select Files and click ‘Upload Document’.

• Either type the path or file name (including the file extension) of the list template that you want to upload, or click ‘Browse’ to select the file. Choose whether to overwrite the existing files. By default, the ‘Overwrite existing files’ check box is selected.

• Click ‘OK’ to choose the file.
• A pop-up appears to edit the name, title and description of the list template.

• Click ‘Save’ to include the list template into the list template gallery.
• Once the list template is added to the list template gallery, we can create a new list using the list template uploaded. Following steps explains how to create a new list using list template.
• From the Site Actions drop-down menu in the top right, select ‘Site Contents’ of your site.

• Click ‘add an app’.

• Find the list template that was uploaded.

• Click on the list template to use for this site

• Pick a name for the new list. We can add this app multiple times with a unique name.

• Click on the ‘Create’ button. A list has now been created using the list template.

Import Tenant

Following steps will explain about tenant import.

• Open the ‘Backup and Restore’ option in AppForms in the destination site and click on the ‘import site’ tab.

• Select the backup file we had saved from the source site.

• Once the file is selected, click on the load button.

• This will show you the different sites that were exported from the source site. If there are more than one site content saved, then you can map each site in backup file to different sites in the current site. Select the required site content that needs to be restored and select the destination site in the current site as shown below. Once we are done with the backup mapping, click on the next button to proceed with the import.

• Now we will have to remap the sites we had used in the source website to the actual site in the target site. The drop down will show you the sites/sub sites to help you with the data source mapping. Click ‘Next’ to continue.

• Click ‘Import’ to continue.

• This will import all the site content we had backed up from the source site and we are ready to work with the forms in the current site.

 Create a Web Part Page

Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a web part page, follow these steps:

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

• Select “Site Pages” or simply pages library on Site Contents Page.

• Click on “New Wiki Page” to add new site page.

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

• 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.

• Click ‘Add’ button to add the WebPart.
• Click on the ‘edit the Webpart’ link to edit the page.

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

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

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

• Click ‘Save’ button to save the changes.

• Below figure shows the form after WebPart configuration.

• Click “Add New” button to open the cascading form. Select values from 3 combo boxes and click save to save values to list.

Introduction

A web service is a software system designed to support inter operable machine-to-machine interaction over a network. In ClaySys AppForms you can connect to the web service to read/write data unless you have restrictions from the server to have the connectivity to the web service from the server. The purpose of this document is designed to be a reference for any person wishing to implement or any person interested in the architecture of the web service with the ClaySys AppForms.

Here we will be using a web service called ‘Currency Converter’, to get the conversion rate from one currency to another currency. The label will display the currency conversion rate of two countries from the two combo boxes. Also we can calculate the equivalent amount of money based on this conversion rate in the text boxes. If we select the currency codes of countries from the two combo boxes, two text boxes available in the right side of the page will be enabled. We can enter currency amount in one of the text box and the other will give the corresponding amount based on the conversion rate.

It is designed to guide development and design in ClaySys AppForms, including:

• Creating the form
• Form Design
• Data Source configuration
• Rules
• How to use this template
• Import tenant
• Create a new web part page

Creating the form
Form Design

Folders are used to store and organize forms that have a logical association or relationship. To create a new form click ‘New Folder’ button on the toolbar of the designer.

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

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

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

• ‘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

Data Source Configuration

Following steps will explain about the Data Source configuration of Combo Box.

• Click on the Combo Box control and click the Data Sources tab to edit the Data Source.

• A pop-up window appears to select the item source. Select the Item Source as ‘Static’ so that the values can be given as static.

• Following figure shows the combo box in preview.

When you upload the form, Web service DataSource will automatically be added to “DataSource settings”. Following steps will explain about how to create a new WebService DataSource.

• In the Data Source wizard on the left side of the designer, select the DataSource Type as WebService.
• Enter the Title& Description for Web Service Data Source. This is mandatory.

Enter URL for the WebService. Example URL: http://www.webservicex.net/currencyconvertor.asmx?wsdl

• Username and Password are not required for this Public Web service. Select ‘Make it Public’ for the availability of created Data Source across all the sites. If its public, it will be available for all the site collections.

• Select ‘Is SharePoint ‘for the UserProfile SharePoint WebService.
• Click on the icon to insert or update the DataSource.
• A message will pop up indicating the successful insertion of web service. Click ‘Ok’.

• Following steps will explain how to configure the web service data source.
• To create an external DataSource click on the ‘Create DataSource’ link on the left side of the designer.

Give the DataSource name and select the DataSource type as ‘Webservice’. Click ‘OK’ to continue.

DataSource configuration wizard with all the WebService datasource mapped will be populated. Select the ‘Currency Convertor’ DataSource from the available DataSources. Click ‘Next’ to continue.

Click ‘Add’ button to add the Select command. DataSource operation in webservice can be defined only for ‘Select’.

Select the DataSource object as ‘ConversionRate’. Click ‘Next’ to continue.

A sample SOAP request shows. Click ‘Next’ to continue.

Enter the control name for the selected DataSource object for XML request. In the request XML view, give the ‘FromCurrency’ as ‘cmbCountry1’ combobox and ‘ToCurrency’ as ‘cmbCountry2’ combobox .Click ‘Next’ to continue.

A sample SOAP response shows. Click ‘Next’ to continue.

In the response XML view, give the ‘ConversionRateResult’ as ‘txtConversionRateResult’ textbox. Click ‘Next’ to continue.

Data Source operation for ‘Select’ is now defined.

Once the Data source operation is defined, it is bound to a control or event that triggers its execution. It is given by ‘Add Trigger’ button. So that the corresponding Execute Command rules will be created with associated trigger.

We can add the trigger by clicking the check box corresponding to the control.

Click ‘Create Rule’ will automatically create the corresponding ExecuteCommand( ) rule for the select command associated with the trigger.

Click ‘Finish’ to save and close the data source configuration.

Rules

The rules section is the most powerful section in the AppForms. The rules can be configured using the Rules Engine. Following are the rules associated with the application.

The rule named ‘GetcurrencyConversionRate’ is basically the DataSource select operation of webservice. Based on the two conditions shown in the figure, the textbox controls can be enabled/disabled and the values of ‘ConversionRateResult’ are populated from the webservice also fills the values of ‘Equivalent amount’ label controls on comboboxes (‘cmbCountry1’ and ‘cmbCountry2’) trigger. 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.

The rule is named ‘CalculateToAmount’ gives an equivalent amount of money in ‘txtToAmount’, which is the multiplicative amount of ‘txtConversionRateResult’ and the ‘txtFromAmount’ on ‘txtFromAmount’ trigger.

The rule is named ‘CalculateFromAmount’ gives an equivalent amount of money in ‘txtFromAmount’ which is the divided amount of ‘txtToAmount’ and ‘txtConversionRateResult’ on ‘txtToAmount’ trigger.

 How to use this template

Import Tenant

Following steps will explain about tenant import.

Open the ‘Backup and Restore’ option in AppForms in the destination site and click on the ‘import site’ tab.

Select the backup file we had saved from the source site.
Once the file is selected, click on the load button.

This will show you the different sites that were exported from the source site. If there are more than one site content saved, then you can map each site in backup file to different sites in the current site. Select the required site content that needs to be restored and select the destination site in the current site as shown below. Once we are done with the backup mapping, click on the next button to proceed with the import.

Now we will have to remap the sites we had used in the source website to the actual site in the target site. The dropdown will show you will the sites/sub sites to help you with the datasource mapping. Click ‘Next’ to continue.

Click ‘Import’ to continue.

This will import all the site content we had backed up from the source site and we are ready to work with the forms in the current site.

Create a Web Part Page

Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a webpart page, follow these steps:

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

Select “Site Pages” or simply pages library on Site Contents Page.

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

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

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

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

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

Pop-up appears with listed published forms. We can select the appropriate form by click on the form and add the form by clicking on the ‘Select’ button.
Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ to continue.

Click ‘Save’ button to save the changes.

Below figure shows the form after Web Part configuration.