WebMail
Overview
Template by Syamily K S | December 15, 2015

Webmail are 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 Webmail Template. Here is an image what the Webmail template dashboard we are going to be designing looks like.

Prerequisite(s)
  • SharePoint 2010
AddNew
Address Book
Send Button
SaveAsDraft
Compose Mail
Data Structure

SharePoint lists consist of rows and columns that store data in a similar fashion to a traditional relational database management system such as SQL Server. However, a benefit of lists is that SharePoint includes Web Parts that provide simple methods for managing the data. If the data was stored in a database, it would require custom user interface components to access it and manipulate it. Also, specialized skills are required to design, implement, and maintain a custom database. Another advantage of using lists is that custom workflow and event handlers can easily be registered to them. By default the following columns are available in sharepoint list, ID, Title, Modified, Created, Modified By, Created By, Attachments. Apart from these default list columns , user can add more columns depending on the requirement.

SharePoint List
List NameColumn NameData Type

WebMailBox

It contains the list of mails and mail details like From Address , To Address ,Date etc.

ToAddressSingle line of text
SubjectSingle line of text
BodyMultiple line of text
MailStatusSingle line of text
FromAddressSingle line of text
DateDate and Time
SharePoint List
List NameColumn NameData Type

WebMailAddressBook

It contains the list of contact Email address and their Uploaded photo.

MailIDSingle line of text
FileUploadNameSingle line of text
Design And Configuration

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 Compose mail icon we can compose a mail.
Address Book: On clicking 'AddressBook' button , 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.
AddNew : On clicking 'AddNew' button , popup will appear in which you can Add a new mail ID to your AddressBook.

List Of Forms Used
NameFunctionality
frmAddNewAddresses Form Design Rule Design This form is to add new mail ID to the Address book
Address Rule Design This form is the pop up shown when we click on the Address button in webmail dashboard
MailView Rule Design This form is designed to show each mail details using label controls
frmMails Rule Design This form contains a search which shows all the mail items as a list
Compose Mail Rule Design The screen where a user can write a mail.
WebMail Dashboard Form Design Rule Design The Dashboard displays the details .
WebMail MainForm Form Design The form is used to create a WebMail template
frmAddNewAddresses
frmAddNewAddresses Form Design
01
Create DataSource

Here are the steps for configuring External Data source referring to the form 'frmAddNewAdd
resses'.

Click on 'DataSources' and then click on 'Create DataSource' as shown in the image.

02
Datasource Selection

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

03
List Selection

Select the List from the available list and click 'Next' button.

04
DataSource Command

Select the command as 'Insert' or 'select' as your requirement and click 'Add' button.

05
Mapping Values

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

06
Finish Button

Click 'Finish' button . Thus a new external data source has been created.

frmAddNewAddresses Rule Design
01
Rule Name : OnSubmitBtn | Trigger(s) : btnSubmit
Submit Button

Rule for Executing the “Insert” command. And if you want to maintain the fileUpload name you can store it in the hidden control “hdnFupName”.

02
Rule Name : On_ExecuteComplete | Trigger(s) : Execute Complete
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.

Address
Address Rule Design
01
Rule Name : OnFormload | Trigger(s) : FormLoad
Formload Rule

FillDataSync(srcAddressBook) is the rule to fill the search control named srcAddressBook.

02
Rule Name : On_OkBtn | Trigger(s) : btnOK
Ok Button Rule

RunRule(On_srcSddressBook) and value is returned to hidden control “hdnMailTo”. The function to trim “,” at the end of “hdnMailTo” is written. Then value of “hdnMailTo” is passed to the hidden control “hdnMailTo” in the “WebmailDashboard” form. And this popup is closed.

03
Rule Name : On_CancelBtn | Trigger(s) : btnCancel
Cancel Button Rule

On clicking Cancel button the tab is closed.

04
Rule Name : On_srcSddressBook | Trigger(s) : RunRule

Loop is written to get the MailID from each row of the search to hidden control “hdnMailTo”. The total row count of the search is initially stored in to the variable “VRowCount”. This rule is called from the rule ”On_OkBtn”.

Search Address Book
Search Address Book
MailView
MailView Rule Design
01
Rule Name : Select | Trigger(s) : hdnID
Select Rule

Execute the “Select” command from list and shows the details of a mail.

02
Rule Name : Send | Trigger(s) : btnSendMail
Send Rule

Functionality for sending mail.

03
Rule Name : SaveAsDraft | Trigger(s) : btnSave
SaveAsDraft Rule

Functionality for saving mail as draft.

04
Rule Name : On_hdnStatus | Trigger(s) : hdnStatus
HiddenStatus Rule

Checks whether the mail is a draft . if it is only then the subform containing the send button etc. Should be visible.

frmMails
frmMails Rule Design
01
Rule Name : On_Formload | Trigger(s) : FormLoad
FormLoad Rule

The value of hidden control “hdnStatus” is set to "Recieved".

02
Rule Name : FillSearch | Trigger(s) : hdnStatus
FillSearch Rule

On getting value in the “hdnStatus” the search is to be filled based to the value in the “hdnStatus”.

03
Rule Name : ValueSet | Trigger(s) : hdnMailID
Value Set Rule

The value in the “hdnMailID” is passed to “hdnMailViewID” in the form “WebmailDashboard”.

Compose Mail
Compose Mail Rule Design
01
Rule Name : setMailTo | Trigger(s) : hdnCmpMailTo
SetMailTo Rule

Setting the value of hidden control “hdnCmpMailTo” to the textbox “txtTo”. This include the mail ID that we have selected from the Address book.

02
Rule Name : SendMail | Trigger(s) : btnSendMail
SendMail Rule

Functionality for sending mail.

03
Rule Name : SaveAsDrafts | Trigger(s) : btnSave
SaveAsDraft

Functionality for saving mail as draft.

WebMail Dashboard
WebMail Dashboard Form Design
01

External Form Control
TreeView
Combo Box
Image Buttons

02
Search

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 .

03
Search DataSource

On Clicking the search control , a pop up appears click on 'DataSources'.

04
New DataSource Configuration

Click on 'New DataSource Configuration'.

05
Selecting List

Select the List from the available list and click 'Next' button as shown in the image.

06
Columns

Select the Result Columns which you want to show in the search and click 'Next' button.

07
Condition

Give the condition for the Selection of values in the search as shown in the image and click 'Next' button.

08
Column Header

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.

WebMail Dashboard Rule Design
01
Rule Name : | Trigger(s) :
New Rule

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.

02
Rule Name : | Trigger(s) :
Trigger

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

03
Rule Name : ComboMail | Trigger(s) : imgbtnWebMail
ComboMail Rule

The visibility of combobox is set to true and “[Select]” is removed from the combobox.

04
Rule Name : Visiblility | Trigger(s) : cmbWebMail
Visibility Rule

After Selecting a value in the combobox , it should not be seen so on cmbWebMail trigger the visibility of combobox is set to false.

05
Rule Name : On_TreeView | Trigger(s) : hdnSelectedItem
Treeview Rule

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.

06
Rule Name : On_ComposeBtn | Trigger(s) : imgbtnComposeMail
Compose Mail Rule

On clicking the image button for compose mail, the form “ComposeMail” is loaded in the external form.

07
Rule Name : ViewMail | Trigger(s) : hdnMailViewID
ViewMail rule

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

08
Rule Name : On_Formload | Trigger(s) : FormLoad
FormLoad Rule

On formload external form is loaded with the form “frmMails” and temporary variable ‘vTemp’ is set to zero.

09
Rule Name : SelectedItem_Value | Trigger(s) : tvWebMail
SelectedItem Value Rule

On clicking TreeView control its selected item value is passed to the hidden control “hdnSelectedItem”.

10
Rule Name : Print | Trigger(s) : imgbtnPrint
Print Rule

To print the page on clicking the image button of print.

11
Rule Name : SetMailToValue | Trigger(s) : hdnMailTo
SetmailValue Rule

Rule to pass the value from the current form control “hdnMailTo” to the control “txtTo” in “MailView” which is loaded in the external form.

WebMail MainForm
WebMail MainForm Form Design
01
Creating Folder

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.

02
Save Form

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

03
Check-In 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.

Template Summary

This Template  allows the users to access their emails as long as they have access to an Internet connection and a web browser . Webmail are web-based email accounts . These are usually free email accounts that are operated from a website .

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.

Syamily K S

Nationality : Indian
Education : B-Tech Degree on Computer Science from IHRD CEC Cherthala.
Enjoys pencil drawing , cooking ,listening music,Reading etc during the spare time.
Believes in the principle "Do what you love and love what you do."

Leave a Reply