Custom New Request Form
The system form for new requests in ALVAO WebApp can be replaced with a custom form having a specific content and behavior. A single custom form can create multiple requests simultaneously to support more complex business processes such as the hiring of a new employee.
Note: A custom form can also be a general ALVAO WebApp page not used for request creation. To create such a page you need advanced programming skills.
Templates for creating custom forms are located in the \Custom\Templates\ folder under the ALVAO WebApp installation folder.
Standard Templates List:
| Name |
Description |
| NewTicket |
An example of a form for creating multiple requests with mutual link. It also shows how to use some controls and how to work with the time reporting element for the request being created. |
| EmptyPage |
An empty template. It is used for pages not intended for request creation. Pages of this type are only used for special purposes such as the content of custom tabs for the request. |
The .cshtml file defines the form appearance, while the .cs file, located in the \Code folder, describes the logic of sending data from a filled-in form.
Creating a new form
First of all, create a folder for the functionality the new custom form will relate to (e.g. HrProcessAutomation) in the \Custom folder. A folder for one functionality can contain multiple forms.
Then select the form template which is closest to your intention \Custom\Templates folder. Copy the contents of the folder containing the template to the Custom\<functionality name> folder. Rename the .cshtml and .cs files as necessary. Both files (.cshtml and .cs) need to have the same file name. The form name should start with the name of the functionality, followed by the name of the service it is intended for and the name of the operation, for example: HrProcessAutomation_Onboarding_NewTicket, where HrProcessAutomation is the functionality name, Onboarding is the service name, and NewTicket is the name of the operation.
Warning: The names of all forms used across all functionalities must be unique.
Next you will have to adapt the form code to the new file name:
- At the beginning of the .cs file, after the word namespace, type the name of the namespace Alvao.ServiceDesk.ServiceDeskWebApp.Custom.<functionality_name>. The functionality name will be the name of the folder where the form is located, e.g. Alvao.ServiceDesk.ServiceDeskWebApp.Custom.HrProcessAutomation.
- Then open the .cs file, find the class keyword and change the class name. The class name must be <cshtml page name>Controller. For example, in the HrProcessAutomation_Onboarding_NewTicket.cshtml form the name of the class will be HrProcessAutomation_Onboarding_NewTicketController.
Form Layout Definition
The .cshtml file defines the form layout and specifies which form elements will be displayed. When the user sends the completed form, the data are converted to text which can be used in the behavior definitions.
In the .cshtml file, only edit the parts between the two lines <div id="CustomFormContent" and </div>. Only this part is used to convert form elements to text. Any elements outside CustomFormContent will be displayed in the form, but they will not be converted.
The following form elements are converted to text in requests:
| Element name |
Conversion method |
Line break |
| <label> |
The displayed text will be included into the request body, followed by a colon. |
No |
| Editor "StringField" |
The request body will include the text that the user enters in the text box. If you add the „UniquedId = Model.TicketBodyGuid“ value into element parameter, you will be able to input the formatted text (HTML).
Note: On one form there can be a maximum of one HTML format element.
|
Yes |
| Editor "BoolField" |
The displayed text will be included into the request body, followed by "Yes or No", based on the choice the user makes. |
Yes |
| Editor "DateTimeField" |
The request body will include the date selected by the user. |
Yes |
| Editor "DropDownListField" |
The request body will include the item selected by the user. |
Yes |
| Editor "RadioButtonList" |
The request body will include the item selected by the user. |
Yes |
| Editor "CheckBoxList" |
The request body will include a sequence of all items selected by the user. |
Yes |
| Editor "DoubleField" |
The request body will include integer or decimal number entered by the user. |
Yes |
| Editor "ColumnsControl" |
The request body will include a sequence of all displayed items. Values will be inserted directly to the properties of a request. |
Yes |
| Editor "AttachmentField" |
Attachments will be added to the request creating report. |
No |
Any elements that are not included in the table above will not be included in the request body. You can find examples on how to use all of the individual elements in the NewTicket template.
If you add the "btn-command" class to a button in the .cshtml file, the button will be copied to the command panel as a command.
Note: Number format in the DoubleField is checked when submitting the form and if not correct, it is tagged in red and the message please specify number in the correct format is displayed. The correct English format of writing decimal number is with decimal period.
Form Behavior Definition
The form behavior is defined in the .cs file. The first part of the file code includes the area that can be edited. This area is marked with code comments. Do not alter any other parts of the code!
The creation of requests is the most important feature. The file already includes an example of a request creation that you can use to create your own request versions.
The basic request creation structure is as follows: CreateTicket("Service Name", "Request Name", "Custom Request Body Text\n" + TicketBody);Where TicketBody is the default request body text that has been created through the conversion of the form data to text. If required, you can combine the texts as shown in the example. If you want to insert a line break, use the \n tag.
Note: If the "StringField" element, into which you can enter text in HTML format, is used in the form, use the "<br>" string for line break.
The Service Name has to be filled in exactly as displayed in the Admin program. Subservices can be divided with the / character, e.g. "Internal/HR/New Employee". You have to enter the entire path from the root folder.
You can also use the advanced create request command version which also includes the create bindings feature: CreateTicket("Service Name", "Request Name", "Custom Request Body Text\n" + TicketBody, MainTicketId, TicketRelationType. SystemTicketRelationType.IsChildOf);Where MainTicketId is the number of the linked request. An example of retrieving the ID from the main request is included in the template. The value TicketRelationType.SystemTicketRelationType.IsChildOf defines the link type:
| Value |
Link type |
| RelatesTo |
Relates to |
| IsParentOf |
Is parent of |
| IsChildOf |
Is child of |
| PrecedesBefore |
Precedes before |
| FollowsAfter |
Follows after |
| Blocks |
Blocks |
| IsBlockedBy |
Is blocked by |
| IsDuplicatedBy |
Is duplicated by |
| Duplicates |
Duplicates |
For example, in the case of the value TicketRelationType.SystemTicketRelationType.IsChildOf the request that is being created will be a child of the request and the request with the number retrieved through MainTicketId will be a parent.
Use the following structure for access to the custom items values (example for items "NewName" and "NewNumber"): string NewName = ((ColumnsControl)Model.ColumnsControl["ColumnsControl0"]).Values.Find(Col => Col.Column.sColumn == "NewName").Value as string;
int NewNumber = (int)((ColumnsControl)Model.ColumnsControl["ColumnsControl0"]).Values.Find(Col => Col.Column.sColumn == "NewNumber").Value;Connecting the Form to Application
If you go to the service settings and enter the path to the form, this form will be displayed in the ALVAO WebApp instead of the default new request form. Please refer to Service Desk Settings for more information.
The path to the custom form must be entered as ~/Custom/<functionality name>/<form name without suffix.cshtml>.
Dynamic switching of form languages
When editing the .cs and .cshtml files, you can use the .resx files containing localized strings for individual languages. These strings are displayed to each user loaded from the file according to the user's preferred language. If the .resx file has not been created for any language, the .resx file for English will be used.
Creating the .resx File for Language
First we create a .resx file for English. Copy the SampleController.resx file from the Custom\Templates\Resources folder to the Custom\<functionality name>\Resources folder and rename it to <cshtml page name>Controller.resx.
Open this file in text editor. Insert the following lines behind the "<!-- Insert --!>" line:
<data name="name" xml:space="preserve">
<value>Name</value>
</data>
The result should be the following:
<!-- Insert --!>
<data name="name" xml:space="preserve">
<value>Name</value>
</data>
<!-- Do not change --!>
</root>
Lines:
<data name="name" xml:space="preserve">
<value>Name</value>
</data>
can be copied again and edited in the manner they create more localized strings. Every value "<data name="name" must be unique in the file.
<data name="name" specifies the name used as parameter in the GetResources() function which is described in Using .resx File in .cs and .cshtml Files. <value>Name</value> specifies the value returned by this function.
Lets create the .resx file for Czech language. Copy the edited <cshtml page name>Controller.resx file into the same folder and rename it <cshtml page name>Controller.cs.resx. Edit the copy of the <value>Name</value> item, so the following text is in the file:
<!-- Insert --!>
<data name="name" xml:space="preserve">
<value>Name</value>
</data>
<!-- Do not change --!>
</root>
Warning: Do not edit the other parts of the resx files.
The files for other languages, which can be set as the user's preferred languages, can be copied and edited in the same manner as the <cshtml page name>Controller.cs.resx file. These files are always named <cshtml page name>Controller.<language abbreviation>.resx (for example, <cshtml page name>Controller.de.resx). The usable language abbreviations are defined here:
http://msdn.microsoft.com/cs-cz/goglobal/bb896001.aspx
Using .resx File in .cs and .cshtml Files
The individual items created in .resx files can be used also in .cs and .cshtml files.
In .cshtml file use the label = Model.GetResource("name") string instead of label = "Name" string. The user with Czech set as a preferred language, will see the field description Jméno. Other users will see Name.
When using .cs file, the same function could be achieved by GetResource("name") function instead of a string.
Did not find what you were looking for? Ask our technical support team.
|