ProApp Designer - Release 14 (Package 22)

Simple Controls

Simple controls can show data related to an item or its properties.

Text

Text control is used to display properties of datatypes String, Text, Integer, Float, Decimal, Date, Sequence and Classification. Text control honors Format Specifier set on the ItemType definition. Text control honors the default value set through ItemType definition. You can also set default value for Text control by defining text expression with properties from other controls from the current page or previous pages. Text control has additional settings like Display Condition, Validation Rules, Conditional Formatting etc. that are covered in the subsequent sections.

List

List control is used to display properties of datatypes List, Filter List and Multi Value List. While displaying list, Aras ProAppDesigner uses same underlining list with options defined in the Innovator. List control comes with Control Style setting, with this, options can be shown as RadioButtonGroup in case of single selection list or CheckboxGroup in case of multi selection list. If the Control Style is not set, default Dropdown will be used to show the options. List control honors the default value set through ItemType definition.

Checkbox

Checkbox control is used to display properties of datatype Boolean from the associated ItemType.

Image

Use Image control to display properties of datatype Image from the associated ItemType. Image control will show actions to upload picture, download picture, capture picture, and remove picture. Capture picture can be used to capture picture directly from the camera while using the application in the mobile device.

File

Use File control to display properties of datatype File from the associated ItemType. Admin can setup the file control in File or Video mode inside template definition.

When it is set in video mode, it will show actions to upload video, download video, capture video, and remove video. Capture video can be used to capture video directly from the camera while using the application in the mobile device. It also has inbuilt support to play the video.

File control on the form support drag & drop of files from the local file system. When you drag & drop a file from the windows explorer to file control on the form, it will show dropped file path in the control.

File property used in collection controls columns shows a file selection icon in the column header to support bulk file upload in the collection control. Upon selecting the icon shows ‘Select Files’ flyout with drop area. It also shows ‘Select Files’ flyout when you select Add action from Files table.

Document

Document control allows you to select the document which is stored in Innovator. Upon clicking on tick icon of the control, Select Document dialog will be shown. After entering search criteria, Select Document dialog shows all the files of type Word, PDF and Image. Selected document is stored on the context item as file property. Document control is useful in case you want to generate Word/PDF document from the context item.

RichText

RichText control displays properties of datatype FormattedText from the associated ItemType. In edit mode, RichText control shows toolbar, using it you can format the text with bold, italic, font, color etc. It also allows you to insert items like images, hyperlinks and videos, upon saving all these items are embedded inside FormattedText on the property.

xClassification

xClassification control associates xClassification tree nodes and xProperties with the item. It works exactly same way as you work with regular Innovator forms.

Signature

Signature control captures your digital signature as image and can be saved to image property of the context item. Signature control shows a signature pad, you can use mouse to draw your signature.

Item

Item control displays properties of datatype Item from the associated ItemType. Using this control, you can select existing item of the property’s Data Source ItemType through Select Dialog.

Items

Use Items control to select and display list of items with their keyed-names from the associated ItemType. Using this control, you can select existing items of the property’s Data Source ItemType through Select Dialog. Selected items will be saved as relationships upon saving the context item.

ButtonGroup

ButtonGroup control displays a group of buttons or a single button. Button control can be associated with a custom action defined by admin. Each button can be configured to show a dialog or a shortcut to the existing Innovator page. Button can be also be configured to call a custom script.

Banner

Banner control shows static content like instructions or help on the page. Banner control with static content is added through rich-text editor inside the template. At runtime, it shows rich-text to the user.

Frame

Frame control displays content from the external page. It can be used inside the page to show a report generated from the external BI tool.

HTML

HTML control displays custom UI in the pages and dialogs. HTML content added to this control will be rendered in the same DOM as of the Aras ProAppDesigner Wizard.

CAD Viewer

3D Viewer displays 3D Models developed on software related to CAD. It provides the external users with a detailed view of the item. 3D Models are shown on the right panel and a Tree View of all the individual items is shown on the left. 3D Models can be moved in any direction and can be zoomed in or out, by using the basic mouse and touch (mobile) actions.

Toolbar Options:

In the Tree View each tree item has an option to show or hide it, along with other options stated below:

  • Open: Opens a new tab for the individual item, to access all its information.
  • Isolate: Focuses and shows the current item, by decreasing the opacity of all other items.
  • Show / Hide: Shows or hides the current item.
  • Hide All Other: Hides all items excluding the current item.
  • Fit All: Resizes the 3D model based on the size of the screen.
  • Reset View: Reloads the 3D model.
  • Display All: Shows all items.

Markup:

Click on the Markup button to take a snapshot of the 3D model view and open it in the Image Viewer. You can perform all the basic image editing actions and download the image from the Image Viewer. You can return to the 3D Viewer by clicking the top left button of the Image Viewer.

PDF Viewer

PDF Viewer allows to view 3D PDF and PDF documents associated to that item. PDF Viewer consists of a Toolbar with Panel, View Controls, Zoom, Pan and Select options on the left. While Search and Menu options are on the right

Toolbar Options:

All Toolbar options are briefly explained below.

  • Panel: Opens left panel showing preview of all the pages in the PDF, can be used to move across various pages.
  • View Controls: Provides options to change the Transition, Orientation & Layout of the page view.
  • Zoom: Provides options to Zoom in, Zoom out, Fit to width, Fit to page, Marquee Zoom and other fixed Zoom options.
  • Pan: Moves the models or pages.
  • Select: Selects text or models in the page.
  • Search: Opens a right panel where user can perform search operations on the PDF document.
  • Menu: A dropdown shows up containing the options below:
    • Full Screen: View the PDF in full screen mode.
    • Download: Download the PDF document.
    • Print: Take a printout of the PDF document.
    • Dark / Light Mode: Change the theme of the viewer.
    • Languages: Change the language of all the options available in the viewer.

Markup:

Click on the Markup button to take a snapshot of the page view and open it in the Image Viewer. You can perform all the basic image editing actions and download the image from the Image Viewer. You can return to the PDF Viewer by clicking the top left button of the Image Viewer.

Image Viewer

Use ImageViewer control to render SVG and image files associated with a Document item. Image viewer show list of all files in the dropdown associated with document item. It also shows controls to zoom in, zoom out, and refresh.

Markup:

Click on the Markup button in the toolbar to take a snapshot of the image and open it in the editor. You can perform all the basic image editing actions and download the image from editor. You can return to the Image Viewer by clicking View button from the toolbar.