Clinical Management
Overview
Template by Rakesh_VGopi | November 20, 2015

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 NameColumn NameData Type

Doctor_Final

This SP list has details of patients.

ActiveSingle Line Text
Patient NameSingle Line Text
Design And Configuration

This is a form which was designed for an example for Clinical Management.

List Of Forms Used
NameFunctionality
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
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.

Rakesh_VGopi

Leave a Reply