Overview

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.

Prerequisite(s)
  • SharePoint 2013
Data Structure
Create a list in SharePoint. Add a data source to the form and name it. Path: Click On DataSources in the designer –> Create DataSource –> Enter Name –> Select the data source as SharePoint –> Click Ok –> Select the list created in the share point –> Click on Next button.

SharePoint List
List Name Column Name Data Type
Doctor_Final

This SP list has details of patients.

Active Single Line Text
Patient Name Single Line Text
Design And Configuration
This is a form which was designed for an example for Clinical Management.

List Of Forms Used
Name Functionality
Main Form Form Design This is the Home Page
New patient Form Form Design This form is used to add a new patient
Query Form Form Design This form is used for entering Queries
View comments page: Form Design Rule Design This will be a pop up to view the comments by doctor
Schedule Visit Form Design This Form is used to see
Main Form
Main Form Form Design
01
Home Page

Controls used in the form are Image Control, Image Button, Sub Form, Label, Search Control, Text box as hidden control (visibility is set as false).

02
Header

Follow the steps create the home page to display patient details: Select the first column and by using span option span it to “n” number of columns, eg: 5. Drag “Sub-Form” from Group to the spanned column. Inside the sub form add columns. In one of the columns add one image control. Add one more Sub-form inside one of the columns of the first inserted Sub-form. Add two columns to the second Sub-form. Drag and drop one image control and label control to the added columns respectively. Add another label control to the 1st Sub-form.

03
Navigation

Drag and drop three Image button controls.

04
Controls

Drag and drop a label control and change the name as Patient. Drag and drop an image button, combo box and the search control.

05
Controls

Image button controls are dragged and dropped.

06
Control

Drag and drop the sub-form, image control and label control.

07
Control

Drag and drop the text box control.

08
Renaming Control

How to rename a control: Click on the control a Quick menu will be displayed. Edit the name of the control in the column name field. We can make the control Visible/ Invisible by selecting the check box respectively . The control can be enabled /disabled by selecting the check box respectively. We can also set the Width and Height of the control.

09
Adding Image to Image Control

Adding a image to image control or image button: Steps to add a image to image control or image button. Select the image/image button control. In the right side Properties drop down select Image source. Browse and select the image from the stored location. The image will be added to the image source and displayed in the image/image button control.

10
Configure Search Control

Configuring a search control: Create a list in share point with required field. Click on the search control. Quick menu will be opened. Select the Data Source tab. Click on edit Data Sources Configuration hyperlink.

11
DataSource

Select the Site by clicking the radio button from the pop-up and click on Next button.

12
DataSource

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

13
DataSource

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

14
Property

Click on finish button. The search control will be configured. 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.

New patient Form
New patient Form Form Design
01
New Patient Form

Controls used in the form are Image Control, Image Button, Sub Form, Label, Tab Control, Text box, Check box, Date Time Picker, Button. Steps to create this form: Follow the same steps used in first form to create the header part. Place a label control by spanning columns and change the name as New Patient. Change the header Name of the Tab control to “Patient Information – New Patient”. Properties –> Tab Collection –> Items –> Enter the name in Tab Item Name and click on OK button. The name of the tab control will be changed. Drag and drop controls as shown in the image. The UI design of New Patient Form is completed.

02
DataSource

Save Functionality in the Form: Button is dragged and dropped. Create a list in SharePoint. 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.

03
Save

Select Insert option from the drop down and click on add button.

04
Mapping

Map the columns of list to the design controls and click on OK button.

05
Trigger

Click on Add Trigger Button:

06
Final window

Select btnSave as trigger and click on “Create Rule” button. The rule will be created–> Click on close button. Click on Finish button The data source will be added 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.

Query Form
Query Form Form Design
01
Query Form

ontrols used in the form are Image Control, Image Button, Sub Form, Label, Button.

02
Properties Panel

Steps to create this form: Create the header by using the same steps used in the above forms. Span columns and drop a label control. Name the label as “Queries”. Change the back ground color to “eg: Green”. The back ground color option is present in Properties–> Style –> Background color . Complete the design as shown in the image.

View comments page:
View comments page: Form Design
01
Comments pop up form

Controls used in the form are Image Control, Sub Form, Label, text box, Button.

02
Property panel

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.

View comments page: Rule Design
01
Rule Name : | Trigger(s) :
Pop up

Follow the steps to create the form: Drag and drop all the controls and achieve the Form UI design. 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()”.

Schedule Visit
Schedule Visit Form Design
01
Schedule Visit

Controls used in the form are Image Control, Image Button, Date Time Picker, Label, Search Control.

02
Rules

Steps to create the form: Drag and drop all the controls and achieve the Form UI design. In this a label for error message and search control is placed and as Invisible. 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.

03
Trigger

FormLoad is set as trigger. In Default Tab –> form load will be displayed.

04
Rules

When the Form is loaded, if there is any appointment scheduled for the current date the search control will be displayed with data. If there is no appointment scheduled for the current date, the error message will be displayed. This is achieved using rules. 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 The Form Design is complete.

Template Summary