Rendering Reference Guide

From Pengower
Jump to: navigation, search

This is a reference guide to show you the types of elements you can use in the application and their different rendering options that can be used to present the element to the user.


Action Button

Creates a built-in button that can be used to trigger a desired action. When someone clicks on it, a selected action occurs.

Rendering Options:

Linked action

Input:

ACTION BUTTON-Linked Action.png

Output:

1.jpg


Attachment

Rendering Options:

Standard

The most basic rendering option that enables you to download uploaded files, add attachments like documents, images, files, etc. and remove any existing attachments.

Input:

ATTACHMENT-Standard.png

Output:

6.jpg

Download only

Only gives the user the ability to download file attachments. Adding and removing attachments are disabled.


Input:

ATTACHMENT-Download Only.png

Output:

2.jpg

Image

Only gives users the ability to upload an image file. Uploading other file formats and downloading existing attachments are disabled.

Input:

ATTACHMENT-Image.png

Output:

3.jpg

No Delete

Almost the same as a standard rendering option but without the ability to delete any existing attachments

Input:

ATTACHMENT-No Delete.png

Output:

4.jpg

Read Only

Only shows any attached file as a read only file attachment.

Input:

ATTACHMENT-Read Only.png

Output:

5.jpg

Auto Generate

Rendering Options:

Sequential

Creates a sequential auto generated identification code that is preceded by a user assigned leading text.

Input:

AUTO GENERATE-Sequential.png

Output:

7.jpg

User-linked

Input:

AUTO GENERATE-User Linked.png

Output:

8.jpg

Calculated

Rendering Options:

Number

Presents the calculated value in a read only text.

Input:

CALCULATED-Number.png

Output:

9.jpg


Content

Rendering Options:

Basic

Allows you to format texts and images.

Input:

CONTENT-Basic.png

Output:

10.jpg

Read-only

Converts any previously written content into a read only state.

Input:

CONTENT-Read Only.png

Output:

11.jpg

Standard

This gives you more formatting options than the basic rendering option like uploading images, videos, font styles and sizes, etc.

Input:

CONTENT-Standard.png

Output:

12.jpg

Summary

Shows any input from the Template field as a read only text found at the Rendering option parameters in the builder.

Input:

CONTENT-Summary.png

Output:

13.jpg

Date Time

Rendering Options:

Drop Down Time

Gives you an ability to assign a specific hour and minutes from a drop down selection.

Input:

DATE TIME-Drop Down Time.png

Output:

14.jpg

Popup Date

Gives you the ability to select a specific date from a pop up calendar.

Input:

DATE TIME-Popup Date.png

Output:

15.jpg

Popup Date/Time

Gives you the ability to select a specific date from a pop up calendar and select a specific time from a drop down selection.

Input:

DATE TIME-Popup Date Time.png

Output:

16.jpg

Read Only

Doesn't let you select a date but instead only shows a read only text of a selected date.

Input:

DATE TIME-Read Only.png

Output:

17.jpg

Simple Date

Gives you the ability to select a day, month and a year from a drop down button. It also enables you to automatically set the current date by clicking on the "Today" button.

Input:

DATE TIME-Simple Date.png

Output:

19.jpg

Simple Time

Gives you the ability to enter a desired hour and number of minutes.

Input:

DATE TIME-Simple Time.png

Output:

20.jpg

Simple Time and Date

Gives you the ability to enter in a desired date and time.

Input:

DATE TIME-Simple Date Time.png

Output:

18.jpg

Group

Rendering Options:

Standard

Presents the group's information in table form

Input:

GROUP-Standard.png

Output:

21.jpg

Information

Rendering Options:

Information

Renders any content input to a read only state.

Input:

INFORMATION-Information.png

Output:

22.jpg

Linked Copy

Rendering Options:

Linked Element

Shows the linked element as a read only text.

Input:

LINKED DATA-Linked Element.png

Output:

23.jpg

Multi Select

Rendering Options:

Checkboxes

Enables user to select more than one selection at a time using checkboxes.

Input:

MULTI SELECT-Checkboxes.png

Output:

25.jpg

Double List

Gives you the ability to show the selections and selected item presented inside a selection box. Selection options are found on the left box while selected items are found on the right box.

Input:

MULTI SELECT-Double List.png

Output:

26.jpg

Read-only

This option only shows the previously selected option as a read-only text.

Input:

MULTI SELECT-Read Only.png

Output:

27.jpg

Number

Rendering Options:

Currency

Creates a numeric field to show currency symbol, value, post texts and decimal points

Input:

NUMBER-Currency.png

Output:

28a.jpg

Fixed-Width Currency

Creates a currency rendering option but gives you the ability to set the field's pixel width

Input:

NUMBER-Fixed Width Currency.png

Output:

28a.jpg

Percentage Width Currency

Creates a currency rendering option but gives you the ability to set the field's pixel width as a percentage of the total viewing resolution

Input:

NUMBER-Percentage Width Currency.png

Output:

30.jpg

Free-Format

Creates a basic numeric field that enables you to set the number of decimal places and using the default text field pixel width

Input:

NUMBER-Free Format.png

Output:

29.jpg

Percentage Width Free-Format

Creates a basic numeric field that enables you to set the number of decimal places and gives you the ability to set the field's pixel width as a percentage of the total viewing resolution.

Input:

NUMBER-Percentage with Free Format.png

Output:

31.jpg

Fixed-Width Free Format

Creates a basic numeric field that only enables you to set the number of decimal places and the field's pixel width.

Input:

NUMBER-Fixed Width Free Format.png

Output:

33.jpg

Fixed Width Text Encased

Gives you the same rendering of a Fixed Width Currency rendering but also gives you the ability to set a Pre-text.

Input:

NUMBER-Fixed Width - Text Encased.png

Output:

34.jpg

Percentage Width Text Encased

Gives you the same rendering option of a Fixed Width Text Encased rendering but enables you to choose the field's width as a percentage of the total viewing resolution

Input:

NUMBER-Percentage Width Text Encased.png

Output:

33.jpg

Read only

Gives you the ability to show the previously entered numeric entry as a read only text.

Input:

NUMBER-Read Only.png

Output:

36.jpg

Return Action

Input:

NUMBER- Return Action.png

Output:

37.jpg

Relationship

Rendering Options:

Multi Add and Update

Input:

RELATIONSHIP-Multi Add and Update.png

Output:

38.jpg

Multi Select

Input:

RELATIONSHIP-Multi Select.png

Output:

39.jpg


Read only

Input:

RELATIONSHIP-Read Only.png

Output:

40.jpg


Sequential

Input:

RELATIONSHIP-Sequential.png

Output:

41.jpg


Single Select

Input:

RELATIONSHIP-Single Select.png

Output:

45.jpg

Single Select and Fix

Input:

RELATIONSHIP- Single Select and Fix.png

Output:

43.jpg


Single Select - Fixed Width

Input:

RELATIONSHIP-Single Select Fixed Width.png

Output:

42.jpg

Single Select or Add

Input:

RELATIONSHIP - Single Select or Add.png

Output:

44.jpg

Selectable

Rendering Options:

Drop down

Shows the selection using a drop down list

Input:

SELECTABLE-Drop Down.png

Output:

48.jpg

Drop Down - Fixed Width

Shows the selection using a drop down list and lets you adjust the pixel width of the drop down box.

Input:

SELECTABLE-Drop Down - Fixed Width.png

Output:

47.jpg

Radio

Uses radio buttons to present the selections which users can choose from

Input:

SELECTABLE-Radio.png

Output:

46.jpg

Read Only

Shows the previously selected option as a read only text.

Input:

SELECTABLE-Read Only.png

Output:

49.jpg

Text

Rendering Options:

Fixed-Width Multi

Creates a text field that enables you to select it's pixel width and line height.

Input:

TEXT-Fixed Width Multi.png

Output:

50.jpg


Fixed-Width Single

Creates a text field that enables you to select its pixel width.

Input:

TEXT-Fixed Width Single.png

Output:

51.jpg


Include Link

Creates an email text field that also converts the text input into a clickable link. When clicked on, it opens your user's default email client.

Input:

TEXT-Include Link.png

Output:

52.jpg


Multi Line

Creates a text field with a default pixel width and lets you choose the line height.

Input:

TEXT-Multi Line.png

Output:

55.jpg

Password

Creates a password text field that hides text character inputs and replaces it with a special character.

Input:

TEXT-Password.png

Output:

54.jpg


Percent Width Multi

Creates a text field that enables you to assign its line height and width as a width percentage of the total viewing resolution.

Input:

TEXT-Percent Width Multi.png

Output:

53.jpg

Percent Width Single

Creates a text field that enables you to assign its width as a width percentage of the total viewing resolution.

Input:

TEXT-Percentage Width Single.png

Output:

59.jpg

Read Only

Shows a previously entered text as a read only text.

Input:

TEXT-Read Only.png

Output:

57.jpg


Single Line

Creates a single line text field with a default width.

Input:

TEXT-Single Line.png

Output:

56.jpg

Time Period

Rendering Options:

Day/Hour/Minute

Enables you to choose days, hours and minutes from a drop down selection.

Input:


TIME PERIOD-Day Hour Minute.png

Output:

60.jpg

Hour/Minute

Enables you to choose hours and minutes from a drop down selection.

Input:

TIME PERIOD-Hour Minute.png

Output:

61.jpg

Read only

Shows any previously selected option as a read-only text.

Input:

TIME PERIOD-Read Only.png

Output:

62.jpg

True False

Rendering Options:

Standard

Input:

TRUE FALSE-Standard.png

Output:

True_False_-_Standard.png


Read Only

Input:


TIME PERIOD-Read Only.png

Output:

True False -Read Only.png

See Also

Element Types

Types

Sections

How to Set an Element's appearance

How to create Elements