AppForms

Web service in ClaySys AppForms

Vinod Tharakan | Last Updated on : June 3, 2019

Introduction

A web service is a software system designed to support inter operable machine-to-machine interaction over a network. In ClaySys AppForms you can connect to the web service to read/write data unless you have restrictions from the server to have the connectivity to the web service from the server. 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 web service with the ClaySys AppForms.

Here we will be using a web service called ‘Currency Converter’, to get the conversion rate from one currency to another currency. The label will display the currency conversion rate of two countries from the two combo boxes. Also we can calculate the equivalent amount of money based on this conversion rate in the text boxes. If we select the currency codes of countries from the two combo boxes, two text boxes available in the right side of the page will be enabled. We can enter currency amount in one of the text box and the other will give the corresponding amount based on the conversion rate.

Image1

It is designed to guide development and design in ClaySys AppForms, including:

  • Creating the form
  • Form Design
  • Data Source configuration
  • Rules
  • How to use this template
  • Import tenant
  • Create a new web part page

Creating the form
Form Design

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.

Image2

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

Image3

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

Image4

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

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.

Image6

  • A pop-up window appears to select the item source. Select the Item Source as ‘Static’ so that the values can be given as static.
Image7
  • Following figure shows the combo box in preview.

Image8

When you upload the form, Web service DataSource will automatically be added to “DataSource settings”. Following steps will explain about how to create a new WebService DataSource.

  • In the Data Source wizard on the left side of the designer, select the DataSource Type as WebService.
  • Enter the Title& Description for Web Service Data Source. This is mandatory.

Image10
Enter URL for the WebService. Example URL: http://www.webservicex.net/currencyconvertor.asmx?wsdl

Image11

  • Username and Password are not required for this Public Web service. Select ‘Make it Public’ for the availability of created Data Source across all the sites. If its public, it will be available for all the site collections.

Image12

  • Select ‘Is SharePoint ‘for the UserProfile SharePoint WebService.
  • Click on the icon to insert or update the DataSource.
  • A message will pop up indicating the successful insertion of web service. Click ‘Ok’.
image13
  • Following steps will explain how to configure the web service data source.
  • To create an external DataSource click on the ‘Create DataSource’ link on the left side of the designer.
Image14

Give the DataSource name and select the DataSource type as ‘Webservice’. Click ‘OK’ to continue.

Image15
DataSource configuration wizard with all the WebService datasource mapped will be populated. Select the ‘Currency Convertor’ DataSource from the available DataSources. Click ‘Next’ to continue.

Image16
Click ‘Add’ button to add the Select command. DataSource operation in webservice can be defined only for ‘Select’.
Image17
Select the DataSource object as ‘ConversionRate’. Click ‘Next’ to continue.

Image18
A sample SOAP request shows. Click ‘Next’ to continue.

Image19
Enter the control name for the selected DataSource object for XML request. In the request XML view, give the ‘FromCurrency’ as ‘cmbCountry1’ combobox and ‘ToCurrency’ as ‘cmbCountry2’ combobox .Click ‘Next’ to continue.
Image20
A sample SOAP response shows. Click ‘Next’ to continue.

Image21
In the response XML view, give the ‘ConversionRateResult’ as ‘txtConversionRateResult’ textbox. Click ‘Next’ to continue.
Image22
Data Source operation for ‘Select’ is now defined.

Image23
Once the Data source operation is defined, it is bound to a control or event that triggers its execution. It is given by ‘Add Trigger’ button. So that the corresponding Execute Command rules will be created with associated trigger.

Image24
We can add the trigger by clicking the check box corresponding to the control.

Image25
Click ‘Create Rule’ will automatically create the corresponding ExecuteCommand( ) rule for the select command associated with the trigger.

Image26
Image27
Click ‘Finish’ to save and close the data source configuration.

Rules

The rules section is the most powerful section in the AppForms. The rules can be configured using the Rules Engine. Following are the rules associated with the application.

The rule named ‘GetcurrencyConversionRate’ is basically the DataSource select operation of webservice. Based on the two conditions shown in the figure, the textbox controls can be enabled/disabled and the values of ‘ConversionRateResult’ are populated from the webservice also fills the values of ‘Equivalent amount’ label controls on comboboxes (‘cmbCountry1’ and ‘cmbCountry2’) trigger. This process is converted into concise, yet readily understood rule expression statements that represent the underlying execution logic of the form as shown in the figure.

Image28

The rule is named ‘CalculateToAmount’ gives an equivalent amount of money in ‘txtToAmount’, which is the multiplicative amount of ‘txtConversionRateResult’ and the ‘txtFromAmount’ on ‘txtFromAmount’ trigger.

Image29

The rule is named ‘CalculateFromAmount’ gives an equivalent amount of money in ‘txtFromAmount’ which is the divided amount of ‘txtToAmount’ and ‘txtConversionRateResult’ on ‘txtToAmount’ trigger.

Image30

 How to use this template

Import Tenant

Following steps will explain about tenant import.

Open the ‘Backup and Restore’ option in AppForms in the destination site and click on the ‘import site’ tab.

Image31
Select the backup file we had saved from the source site.Image32
Once the file is selected, click on the load button.

Image33
This will show you the different sites that were exported from the source site. If there are more than one site content saved, then you can map each site in backup file to different sites in the current site. Select the required site content that needs to be restored and select the destination site in the current site as shown below. Once we are done with the backup mapping, click on the next button to proceed with the import.

Image34
Now we will have to remap the sites we had used in the source website to the actual site in the target site. The dropdown will show you will the sites/sub sites to help you with the datasource mapping. Click ‘Next’ to continue.
Image35
Click ‘Import’ to continue.

Image36
This will import all the site content we had backed up from the source site and we are ready to work with the forms in the current site.

Image37
Create a Web Part Page

Forms can be embedded on any SharePoint page by using the ClaySys AppForms Web Part, to create a webpart page, follow these steps:

Click on Site Settings Wheel in the upper right corner of your site and then select “Site Contents Page”.

Image38

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

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

Image40

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

Image41
To add a new web part, click on the ‘Insert’ tab and then click on the ‘WebPart’ button. Then select Claysys -> Claysys HTML WebPart.

Image42
Click ‘Add’ button to add the Web Part.
Click on the ‘edit the Web part’ link to edit the page.

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

Image44

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.Image45
Once the configuration is finished, click on the ‘Apply’ button to see the changes. Click ‘OK’ to continue.

Image46

Click ‘Save’ button to save the changes.

Image47

Below figure shows the form after Web Part configuration.

Image48

Vinod TharakanFounder & Managing Director of ClaySys Technologies.
0 Comments

Leave a Reply

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

Best Practices in ClaySys Appforms Configuration

2019-06-04 11:23:19