AppForms

Create Hotel Booking Platform Using AppForms

Vinod Tharakan | Last Updated on : May 28, 2019

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:-
UI
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
UI
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.

image

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

image

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

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

image

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

image

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

image

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

image

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

image

  •  Following data shows the combo box in preview.

image

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

image
image
image
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
Image1

Rule 2: On_cmbCity

Image2

   Rule 3: ToDateSetting


Image3
Rule 4: BtnSearch

Image4

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

Rule1
Rule 2: On_hdnCity

Rule2

Rule 3: SelectRepeat

Rule3

Rule 4: SearchRule

Rule4
Rule 5: RemoveRule

Rule5
   Rule 6: RemoveRuleLoop

Rule6
   Rule 7: On_cmbCity


Rule7
Rule 8: SetValueToCountry


Rule8

Rule 9: HomePageNavigation

Rule9

  • “HotelDetail” form contains following rules

Rule No

Rule Name

Trigger

Functionality

1

On_hdnID

hdnID

Data populated on the basis of hdnID

2

SetHotelNameTOHyperLink

hdnHotelName

Setting hotel name to Hyperlink control

3

ClearRule

hdnClear

Clearing values on the basis of search result

Rule 1: On_hdnID

Rule

Rule 2: SetHotelNameTOHyperLink

Rule
   Rule 3: ClearRule

Rule
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

Image

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

Image

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

Image

  • Click on ‘Upload Document’

Image

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

Image

  • 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

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

Image

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

Image

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

Image

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

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

Image

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

Image

  • Click ‘Next’ button

Image

  • Click on ’Import’ button

Image

  • Backup re stored successfully

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

Image

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

Image

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

Image

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

Image

  • 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

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

Image

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

Image

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

Image

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

Image

  • Click ‘Save’ button to save the changes.

Image

  • Below figure shows the form after WebPart configuration.

Image

Vinod Tharakan
Vinod TharakanFounder & Managing Director of ClaySys Technologies.
0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *