Custom Forms How To's

From Pengower
Jump to: navigation, search

Everything you need to know about Custom Forms.

How to Create Custom Forms

A Custom form is a page which allows you to present or enter information and data but in contrast with data types, it doesn't specifically store data in its own right.

Tutorial Video

Step by Step Guide

1. Go to the CUSTOM FORM tab and click on the NEW CUSTOM FORM button.

Custom form how to 1.jpg

Custom form how to 2.jpg

2. Choose a name for your custom form by filling out the TITLE field

Custom form how to 3.jpg

3. (OPTIONAL) Put in a description for your custom form using the DESCRIPTION field

Custom form how to 4.jpg

4. (OPTIONAL) Assign an action to be automatically activated when this custom form is opened by selecting an action under the pre open action field

Custom form how to 5.jpg

5. (OPTIONAL) You can also choose a process action which is the action activated when a custom form is submitted.

Custom form how to 6.jpg

6. Click on the UPDATE button to save.

Custom form how to 7.jpg

See Also

Custom Forms

How to Create Custom Form Elements

How to create a welcome message for your application using Custom forms

How to Create Custom Tables

How to Process Custom Forms using Action Scripts

How to Create Custom Form Elements (Same with creating Type Elements)

Tutorial Video

Step by Step Guide

1. Go to the Custom Forms tab and open one that you have previously created.

Create custom forms how to 1.jpg

Create custom forms how to 2.jpg

2. You can add an element to this form by clicking on the NEW element button found at the right. A new window tab should appear.

Create custom forms how to 3.jpg

3. Choose a name for your element by filling out the TITLE field.

Create custom forms how to 4.jpg

4. (OPTIONAL) You can also put in a description for your element using the DESCRIPTION field.

Create custom forms how to 5.jpg

5. Choose an element type

Create custom forms how to 6.jpg

6. Click on the UPDATE button.

Create custom forms how to 7.jpg

7. Click on the RENDERING button under options then choose a rendering option

Create custom forms how to 8.jpg

Create custom forms how to 9a.jpg

8. Fill out the necessary parameters

Create custom forms how to 10.jpg

9. Click on the UPDATE button once you are done.

Create custom forms how to 11.jpg

10. Then click on the UPDATE button.

Create custom forms how to 12.jpg

You now have created an element for your custom form. If you go to your application and view your custom form, you should be able to see the element you just added.

See Also

Custom Forms

How to Create Custom Forms

How to create a welcome message for your application using Custom forms

How to Create Custom Tables

How to Process Custom Forms using Action Scripts

How to Create Custom Tables

Custom tables generally display objects like Groups, Types and Elements by using HTML and action scripts.

Tutorial Video

Step by Step Guide

First, let's create an Action Script

1. Go to the ACTIONS tab and click on the NEW ACTION button . A new tab should appear.

Custom table 1.jpg

Custom table 2.jpg

2. Let's put in a name for our action using the TITLE field.

Custom table 3.jpg

3. Under type, lets choose USE SCRIPT

Custom table 4.jpg

4. Click on the UPDATE button.

Custom table 5.jpg

5. You should see the script window appear on the right side. Click on the EDIT SCRIPT button. It should open a new window tab.

Custom table 6.jpg

6. Write your action script.

Custom table 7.jpg

Sample Action script:

 Set tdy = TODAY
 Set usr = Current_User
 Set usrRef = usr["Reference"]
 Set sql = "Status = 'Active'"
 Set persons = Get "Person" Where sql
 Set dbl = "" + DBLQTE
 Set strBuilder = Do New String Builder
 Set header ="<tr><td class='workGroupHeader'></td><td wrap class='workGroupHeader'>Surname</td><td wrap class='workGroupHeader' >First Name</td><td wrap class='workGroupHeader'>Status</td></tr>"

 AddTo strBuilder = header

 If persons.Count > 0
 For a=1 To persons.Count
  Set person = persons[a]
  Set surname = "" + person["Surname"]
  Set firstname = "" + person["First Name"]
  Set status = "" + person["Status"]
  Set reference = "" + person["Reference ID"]

  AddTo strBuilder = "<tr>"
  AddTo strBuilder = "<td class='listEditColumnText'><span style="
  AddTo strBuilder = dbl
  AddTo strBuilder = "cursor:pointer;vertical-align:middle;"
  AddTo strBuilder = dbl
  AddTo strBuilder = "onclick="
  AddTo strBuilder = dbl
  AddTo strBuilder = "javascript:openThis('"
  AddTo strBuilder = reference
  AddTo strBuilder = "','Person','OPEN')"
  AddTo strBuilder = dbl
  AddTo strBuilder = "><img style='vertical-align:middle;height:16px;' title='Edit this item' alt='Edit this item' src='sticons/icon_edit_sm.png'></span></td>"
  AddTo strBuilder = "<td class='listText' wrap>"
  AddTo strBuilder = surname
  AddTo strBuilder = "</td>"
  AddTo strBuilder = "<td class='listText' wrap>"
  AddTo strBuilder = firstname
  AddTo strBuilder = "</td>"
  AddTo strBuilder = "<td class='listText' wrap>"
  AddTo strBuilder = status
  AddTo strBuilder = "</td>"
  AddTo strBuilder = "</tr>"
 Next
 EndIf

 Output = "" + strBuilder
 Return_Ok

7. Once you have written your script, click on the SAVE ACTION button and close.

Custom table 8.jpg

Custom table 9.jpg

Then, we need to create an HTML Snippet.

1. Go to the HTML SNIPPETS tab and click on the NEW HTML SNIPPET button

Custom table 10.jpg

Custom table 11.jpg

2. Put in a title for our html snippet using the TITLE field.

3. (OPTIONAL) You can also put in a description using the DESCRIPTION field

Custom table 12.jpg


4. Write in the HTML Script in the Default body box. You can also click on the EDIT HTML BODY button to start writing the HTML script. A new window tab should appear.

Custom table 13.jpg

Sample Script:

<table> <%RunScript ha_group_active_people%> </table>

where: ha_group_active_people = name of the Action script (note: use underscores instead of spaces)

5. Click on the UPDATE button.

Custom table 14.jpg


Now, create an action script that would call the HTML Snippet that we just created.

1. Go to the ACTIONS tab and click on the NEW ACTION button

Custom table 15.jpg

Custom table 16.jpg

2. Choose a name for your action by filling out the TITLE field

Custom table 17.jpg

3. Under Type, choose OPEN HTML PAGE

Custom table 18.jpg

4. Under Parameters, choose the HTML snippet you created

Custom table 19.jpg

5. Click on the UPDATE button once you are done.

Custom table 20.jpg

Lastly, we can now access the Custom Table you have just created by placing it in a Toolbar or a Menu

6. Go to the toolbars tab and open a Toolbar you have previously created.

800px

Custom table 22.jpg

7. You should see the action you have just created to view your Custom Table at the Options window. Click on it twice. You should see it get transferred to the Selected window

Custom table 23.jpg

Custom table 24.jpg

8. Click on the UPDATE button and UPDATE APPLICATION button.

Custom table 25.jpg

Custom table 26.jpg

When you visit your application, you should see the action listed at your Toolbar. When you click on it, it should direct you to your Custom Table.

Custom table 27.jpg

You now have created a Custom Table.

See Also

How to Process Custom Forms using Action Scripts

Custom Forms can be processed by Actions scripts.

Tutorial Video

Step by Step Guide

First, Let's add an element to an existing Custom Form.

1. Go to Custom Forms, and choose an existing Custom Form that you have created. (Or you can also create a new one)

Process custom forms with actions how to 1.jpg

Process custom forms with actions how to 2.jpg

2. Click on the NEW element button

Process custom forms with actions how to 3.jpg

3. Choose a name for your element using the TITLE field.

Process custom forms with actions how to 4.jpg

4. Under type, let's choose TEXT.

Process custom forms with actions how to 5.jpg

5. Click on the UPDATE button.

Process custom forms with actions how to 6.jpg

6. Click on the RENDERING button under options. A pop up window should appear.

Process custom forms with actions how to 6a.jpg

7. Under rendering options, choose PERCENTAGE WIDTH MULTI

Process custom forms with actions how to 7.jpg

8. Fill out the needed Parameters like the number of lines and Percent Width.

Process custom forms with actions how to 8.jpg

9. Once done, click on the UPDATE button

Process custom forms with actions how to 9.jpg

10. Click on the UPDATE button again to save your element.

Process custom forms with actions how to 10.jpg

Let's create an Action Script that will process our Custom Form.

11. Go to the ACTIONS tab and click on the NEW ACTION button

Process custom forms with actions how to 11.jpg

Process custom forms with actions how to 12.jpg

12. Choose a name for your action using the TITLE field.

Process custom forms with actions how to 13.jpg

13. Then under type, choose USE SCRIPT

Process custom forms with actions how to 14.jpg

14. Click on the UPDATE button. You should notice the Script window appear at the right.

Process custom forms with actions how to 15.jpg

15. Start writing our script

Process custom forms with actions how to 16.jpg

Sample Script:

//fa Submit Message

 Set form = Current_Form
 Set var = form["Message"]
 Output = var
 Return_Ok

 //fa Submit Message

16. Click on the SAVE ACTION button and CLOSE.

Process custom forms with actions how to 17.jpg

Process custom forms with actions how to 18.jpg

17. Click on the UPDATE button again to save the Action.

Process custom forms with actions how to 19.jpg

Process custom forms with actions how to 20.jpg


Lastly, let's create a Submit button element.

18. Go back to the CUSTOM FORM tab and click on the NEW element button

Process custom forms with actions how to 21.jpg

19. Choose a name for your element using the TITLE field.

Process custom forms with actions how to 22.jpg

20. Under type, choose ACTION BUTTON

Process custom forms with actions how to 23.jpg

21. Click on the UPDATE button.

Process custom forms with actions how to 24.jpg

Process custom forms with actions how to 25.jpg

22. Under rendering options, let's choose LINKED ACTION

Process custom forms with actions how to 26.jpg

23. Under the Parameters, put in the Action Name

Process custom forms with actions how to 27.jpg

24. Click on the UPDATE button and the UPDATE APPLICATION button.

Process custom forms with actions how to 28.jpg

Process custom forms with actions how to 29.jpg

When you launch your application and open the custom form, you should be able to see the elements you have added. Submitting the form will process it and give you an output.

Process custom forms with actions how to 30.jpg

Process custom forms with actions how to 31.jpg

Process custom forms with actions how to 32.jpg

How to create a welcome message for your application using Custom forms

You can create a welcome message for your application to greet your users using custom forms.

Tutorial Video

Step by Step Guide

1. Go to the CUSTOM FORM tab and click on the NEW CUSTOM FORM button.

Welcome message custom how to 1.jpg

Welcome message custom how to 2.jpg

2. Choose a name for your custom form by filling out the TITLE field

Welcome message custom how to 3.jpg

3. Save your custom form by clicking on the UPDATE button.

Welcome message custom how to 4.jpg

4. Click on the "new element" button

Welcome message custom how to 5.jpg

5. Choose a title for your element

Welcome message custom how to 6.jpg

6. Under type, choose Information.

Welcome message custom how to 7.jpg

7. Click on the UPDATE button

Welcome message custom how to 8.jpg

8. Click on the rendering button under options. Under rendering options, let's choose information.

Welcome message custom how to 9.jpg

Welcome message custom how to 10.jpg

9. Under the Text Parameter, write your welcome message. You can also use html tags to customize the look of your message.

Welcome message custom how to 11.jpg

10. Click on the UPDATE button

Welcome message custom how to 12.jpg

11. Now that we have created our custom form, let's create an action that will open it. Go to the ACTIONS tab and click on the NEW ACTION button .

Welcome message custom how to 13a.jpg

Welcome message custom how to 14.jpg

12. Put a label for your action

Welcome message custom how to 15.jpg

13. Choose "open custom form" under type

Welcome message custom how to 16.jpg

14. Under parameters, choose the name of your custom form

Welcome message custom how to 17a.jpg

15. Click on the UPDATE button to save.

Welcome message custom how to 18.jpg

16. Let's set the welcome message to automatically appear whenever users visit your application. Go to the VIEWS tab and open your application view.

Welcome message custom how to 19.jpg

Welcome message custom how to 20a.jpg

18. Set our action "open welcome message" as our start action

Welcome message custom how to 21.jpg

19. Click on the UPDATE button and the UPDATE APPLICATION button respectively

Welcome message custom how to 22.jpg

Welcome message custom how to 23.jpg

20. Let's launch your application by clicking on the launch view button. You should now see your welcome message appear.

Welcome message custom how to 24.jpg

See Also

Custom Forms

How to Create Custom Forms

How to Create Custom Form Elements

How to Create Custom Tables

How to Process Custom Forms using Action Scripts