Web Mail

Design Document for WebMail

Introduction
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 web mail Template. Here is an image what the webmail template dashboard we are going to be designing looks like.
Image 1
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:
Image 2
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.
Image 3

  • 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.
image 5
  • 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.
Image 6
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.
Image 4
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.
Image 1
  • Then click on the ‘New Form’ link on the toolbar. Give an appropriate name for the form. Click ‘Save Form’ to save the form.
Image 2
  • 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.
Image 3
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).
Image 4
  • frmMails (This form contains a search which shows all the mail items as a list).
Image 5
  • MailView (This form is designed to show each mail details using label controls).
Image 6
  • Address ( This form is the pop up shown when we click on the Address button in webmail dashboard).
Image 7
  • frmAddNewAdresses (This form is to add new mail ID to the Address book).
Image 8
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 .
Image 1
  • On Clicking the search control , a pop up appears click on ‘DataSource’.
Image 2
  • Click on ‘New DataSource Configuration’.
Image 3
  •  Select the List from the available list and click ‘Next’ button as shown in the image.
Image 4
  • Select the Result columns Which you want to show in the search and click ‘Next’ button.
Image 5
  • Give the condition for the Selection of values in the search as shown in the image. And click ‘Next’ button.
Image 6
  • 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.
Image 7
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.
Image 1
  • Enter the name for the DataSource ,Select the ‘DataSource Type’ and click ‘OK’ button. As shown in the image.
Image 2
  •  Select the List from the available list and click ‘Next’ button.
Image 3
  • Select the command as ‘Insert’ or ‘select’ as your requirement and click ‘Add’ button.
Image 4
  • Enter the Command Title and enter the mapping values as shown in the image and click ‘OK’ button.
Image 5
  • Click ‘Finish’ button . Thus a new external data source has been created.
Image 6
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.
Image 1
Also you can add trigger to the rule by selecting the triggers as shown in the image below.
Image 2
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
Image 3
Rule 2: Visiblility
Image 4
Rule 3: On_TreeView
Image 5
Rule 4: On_ComposeBtn
Image 6
Rule 5: ViewMail
Image 7
Rule 6: On_Formload
Image 8
Rule 7: SelectedItem_Value
Image 9
Rule 8: Print
Image 10
Rule 9: SetMailToValue
Image 11
  • Rules in “Address” Form:

Rule No.

Rule Name

 Trigger

  Functionality

1

On_Formload

FormLoad

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

2

On_OkBtn

btnOK

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.

3

On_CancelBtn

btnCancel

On clicking Cancel button the tab is closed.

4

On_srcSddressBook

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


Rule 1: OnFormLoad

Image 1
Rule 2: On_OkBtn
Image 2
Rule 3: On_CancelBtn
Image 3
Rule 4: On_srcSddressBook
Image 4
Image 5
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
Image 1
Rule 2: On_ExecuteComplete
Image 2
Rules in “frmMails” Form:

Rule No.

Rule Name

 Trigger

  Functionality

1

On_Formload

FormLoad

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

2

FillSearch

hdnStatus

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

3

ValueSet

hdnMailID

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


Rule 1: On_Formload
Image 1


Rule 2: FillSearch
Image 2

Rule 3: ValueSet

Image 3Rules 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
Image 1
Rule 2: Send
Image 2
Rule 3: SaveAsDraft
Image 3
Rule 4: On_hdnStatus

Image 4
  • Rules in “ComposeMail” Form:

Rule No.

Rule Name

 Trigger

  Functionality

1

setMailTo

hdnCmpMailTo

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

2

SendMail

btnSendMail

Functionality for sending mail

3

SaveAsDraft

btnSave

Functionality for saving mail as draft.


Rule 1: setMailTo
Image 1
Rule 2: SendMail
Image 2
Rule 3: SaveAsDraft
Image 3

How To Use This Template

Steps To Upload list Template
  • on the right corner of the window click on settings.
Image 1Image 2
  • Click on ‘Site settings’ from the drop down menu , then we can see the following window appearing.
Image 3
  • 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.
Image 4
  • Click on ‘Upload Document’.
Image 5
  • Following Pop up will appear where we can browse a list template stored in our computer and click ‘OK’ button.
Image 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’.
Image 7
  • 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’.
Image 8
  • Following screen will appear where we can type the uploaded template name and click search.
Image 10
  • Then you can see the Uploaded template ,Click on it .
Image 10
  • On clicking it ,we will get following Pop up . Enter the name for the List template and click ‘Create’ button.
Image 12
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.
Image 1
  • Select the ‘Zip File’ and ‘Site Name’ and click ‘Next’.
Image 2
  • Click ‘Next’ button.
Image 3
  • Click on ’Import’ button . Once it done you are free to work with the form in the new site.
Image 4
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”.
Image 1
  • select site pages or simply pages library on site content page.
Image 2
  • Click on “New Wiki Page” to add new site page.
Image 3
  •  Give the New page name into the pop-up window and click ‘Create’ to add new page.
Image 4
  • 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.
Image 5
  • Click ‘Add’ button to add the Web Part. Click on the ‘edit the Web part’ link to edit the page.
Image 6
  • A new pop-up window appears and here we can configure the ClaySys AppForms by clicking on the ‘Configure’ button.
Image 7
  •  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.
Image 8
  • Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ button.
Image 9
  • Now you can see the web part page you just created, as shown in the following image. Click ‘Save’ button to save the changes.
Image 10
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestEmail this to someone

Leave a Reply