Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
3400_how_to:0200_forms_and_user_interface [2026/08/13 04:02] – external edit 127.0.0.13400_how_to:0200_forms_and_user_interface [2026/08/13 07:43] (current) – Imported by DokuWiki Advanced Plugin aware_support3
Line 1: Line 1:
 ====== Forms And User Interfaces ====== ====== Forms And User Interfaces ======
  
-{{simplenavi>.:0200_forms_and_user_interface}}+===== How to ... =====
  
-<accordion id="formsanduserinterface" collapsed="true">+<accordion autoclose>
  
-<panel type="primary" title="design a form">+<anchor id="design_a_form"> 
 +<accordion-item title="design a form">
 There are three types of forms used in //**AwareIM**//: There are three types of forms used in //**AwareIM**//:
  
Line 16: Line 17:
  
 This form represents a top-level screen that users see when they log into the application. The screen usually contains the system menu, status information, company logo etc. //**AwareIM**// generates the default visual perspective, but you can customize the default perspective and/or supply your own. It is also possible to define several visual perspectives and switch between them. See the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section for details. This form represents a top-level screen that users see when they log into the application. The screen usually contains the system menu, status information, company logo etc. //**AwareIM**// generates the default visual perspective, but you can customize the default perspective and/or supply your own. It is also possible to define several visual perspectives and switch between them. See the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section for details.
-</panel>+</accordion-item>
  
-<panel type="primary" title="attach actions to buttons">+<anchor id="attach_actions_to_buttons"> 
 +<accordion-item title="attach actions to buttons">
 ===== Object Form ===== ===== Object Form =====
  
-Most of the time you do not need to define buttons for object forms. //**AwareIM**// automatically generates the Save and Cancel buttons, that allow submitting or cancelling the changes to the business object, for these forms. //**AwareIM**// also automatically generates the button in the form caption that allow invoking operations with a business object being edited – see the “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0200_form_properties:1600_panel_operations|Panel Operations]]” section for details. You can, however, add your own custom buttons that perform other operations (such as start a process) from a form. To do this you need to define an HTML cell in the form and add an HTML button element that starts a process – see [[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0100_adding_editing_forms|Adding/Editing Business Object Forms]] section (editing of HTML cells).+Most of the time you do not need to define buttons for object forms. //**AwareIM**// automatically generates the Save and Cancel buttons, that allow submitting or cancelling the changes to the business object, for these forms. //**AwareIM**// also automatically generates the button in the form caption that allow invoking operations with a business object being edited – see the “[[:2500_config_apps:0500_add_edit_objects:0200_defining_forms:0200_form_properties#panel_operations|Panel Operations]]” section for details. You can, however, add your own custom buttons that perform other operations (such as start a process) from a form. To do this you need to define an HTML cell in the form and add an HTML button element that starts a process – see [[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0100_adding_editing_forms|Adding/Editing Business Object Forms]] section (editing of HTML cells).
  
 ===== Visual Perspective ===== ===== Visual Perspective =====
Line 28: Line 30:
  
 You can also supply your custom menu instead of getting //**AwareIM**// to generate its own. See [[3400_how_to:0200_forms_and_user_interface]]. You can also supply your custom menu instead of getting //**AwareIM**// to generate its own. See [[3400_how_to:0200_forms_and_user_interface]].
-</panel>+</accordion-item>
  
-<panel type="primary" title="control the order of attributes on automatically generated forms">+<anchor id="control_the_order_of_attributes_on_automatically_generated_forms"> 
 +<accordion-item title="control the order of attributes on automatically generated forms">
 When //**AwareIM**// generates an automatic form for a business object by default it generates controls for all attributes in the order that the attributes have been added to the business object. You can get //**AwareIM**// to generate the controls only for some attributes and specify the desired order of the controls by specifying the attributes and their order and layout in the Form Section Dialog. See the “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections|Adding/Editing Form Sections]]” section for details. When //**AwareIM**// generates an automatic form for a business object by default it generates controls for all attributes in the order that the attributes have been added to the business object. You can get //**AwareIM**// to generate the controls only for some attributes and specify the desired order of the controls by specifying the attributes and their order and layout in the Form Section Dialog. See the “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections|Adding/Editing Form Sections]]” section for details.
-</panel>+</accordion-item>
  
-<panel type="primary" title="initialize form controls">+<anchor id="initialize_form_controls"> 
 +<accordion-item title="initialize form controls">
 When the user is entering attribute values of a new business object using an object form you can get //**AwareIM**// to initialize controls in the form with some values. In order to do this you need to configure the initial value for the attribute represented by the control you want to initialize. See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section for details on how to do this. When the user is entering attribute values of a new business object using an object form you can get //**AwareIM**// to initialize controls in the form with some values. In order to do this you need to configure the initial value for the attribute represented by the control you want to initialize. See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section for details on how to do this.
  
 If initialization of an attribute depends on some complex conditions you can define a business rule that sets the value of the attribute based on these conditions and declare that this rule should be used during form initialization. See the “[[2000_concepts:0800_data_processing:0100_rule_evaluation:0900_initialization_rules|Initialization Rules]]” section. If initialization of an attribute depends on some complex conditions you can define a business rule that sets the value of the attribute based on these conditions and declare that this rule should be used during form initialization. See the “[[2000_concepts:0800_data_processing:0100_rule_evaluation:0900_initialization_rules|Initialization Rules]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="validate user input">+<anchor id="validate_user_input"> 
 +<accordion-item title="validate user input">
 Certain validation rules can be specified when you define attributes of an object. For example, you can specify that the attribute may take only certain values (Choice list) or that the attribute value may only be within the given range (Value Range). See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” for details on how to do this. Certain validation rules can be specified when you define attributes of an object. For example, you can specify that the attribute may take only certain values (Choice list) or that the attribute value may only be within the given range (Value Range). See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” for details on how to do this.
  
Line 47: Line 52:
 <code aim>IF Client.Spouse IS DEFINED AND Client.MaritalStatus='Single' THEN  <code aim>IF Client.Spouse IS DEFINED AND Client.MaritalStatus='Single' THEN 
    REPORT ERROR 'Marital status cannot be single when spouse is defined' </code>    REPORT ERROR 'Marital status cannot be single when spouse is defined' </code>
-</panel>+</accordion-item>
  
-<panel type="primary" title="set up custom form layout">+<anchor id="set_up_custom_form_layout"> 
 +<accordion-item title="set up custom form layout">
 If you want references of the object to be displayed not on tabs inside the form of the object but as separate panels altogether you can use the ''[[ref:a_f:a:display_layout|DISPLAY LAYOUT]]'' action.  If you want references of the object to be displayed not on tabs inside the form of the object but as separate panels altogether you can use the ''[[ref:a_f:a:display_layout|DISPLAY LAYOUT]]'' action. 
  
Line 60: Line 66:
   - Define a process that would display the layout:<code aim>FIND MyObject WHERE …   - Define a process that would display the layout:<code aim>FIND MyObject WHERE …
 DISPLAY LAYOUT MyTab FROM_VP MyPerspective</code> DISPLAY LAYOUT MyTab FROM_VP MyPerspective</code>
-</panel>+</accordion-item>
  
-<panel type="primary" title="set up forms with tabs"> +<anchor id="set_up_forms_with_tabs"> 
-If you want to design an object form that has tabs you need to define two or more form sections for the form – every form section will be represented by a tab. The name of the form section will be the name of the tab. You should also set the navigation style of the form to be “Random”. See the “[[2000_concepts:1200_getting_started:0400_data_entry_and_editing:0200_sections|Form Sections]]”, “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections|Adding/Editing Form Sections]]”, “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0200_form_properties:0800_navigation_type|Choosing Form Section Navigation Style]]” sections. +<accordion-item title="set up forms with tabs"> 
-</panel>+If you want to design an object form that has tabs you need to define two or more form sections for the form – every form section will be represented by a tab. The name of the form section will be the name of the tab. You should also set the navigation style of the form to be “Random”. See the “[[2000_concepts:0400_data_entry_and_editing:0200_sections|Form Sections]]”, “[[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections|Adding/Editing Form Sections]]”, “[[:2500_config_apps:0500_add_edit_objects:0200_defining_forms:0200_form_properties#navigation_type|Choosing Form Section Navigation Style]]” sections. 
 +</accordion-item>
  
-<panel type="primary" title="use different forms for different users">+<anchor id="use_different_forms_for_different_users"> 
 +<accordion-item title="use different forms for different users">
 You may want to display the information differently for different users – for example, some information should be visible to some users, but not others. You may also want to display the information using different colors and fonts. //**AwareIM**// allows displaying different forms for different categories of users based on their access level. There are three types of forms used in //**AwareIM**// – object forms, presentations and visual perspectives (see [[3400_how_to:0200_forms_and_user_interface]]).  You may want to display the information differently for different users – for example, some information should be visible to some users, but not others. You may also want to display the information using different colors and fonts. //**AwareIM**// allows displaying different forms for different categories of users based on their access level. There are three types of forms used in //**AwareIM**// – object forms, presentations and visual perspectives (see [[3400_how_to:0200_forms_and_user_interface]]). 
  
Line 76: Line 84:
  
 You can specify the access level that the visual perspective will be used for as part of the configuration of the visual perspective. Therefore you can configure different visual perspectives for different access levels. See the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section. You can specify the access level that the visual perspective will be used for as part of the configuration of the visual perspective. Therefore you can configure different visual perspectives for different access levels. See the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="show related records">+<anchor id="show_related_records"> 
 +<accordion-item title="show related records">
 You can show the values of attributes of the business objects related to a particular business object on the forms or presentations of this object. For example, if a PurchaseOrder object is related to an OrderLineItem object via the multiple relationship you can show which order line items are related to a particular purchase order on the form or presentation of this order. You can show the values of attributes of the business objects related to a particular business object on the forms or presentations of this object. For example, if a PurchaseOrder object is related to an OrderLineItem object via the multiple relationship you can show which order line items are related to a particular purchase order on the form or presentation of this order.
  
Line 99: Line 108:
  
 See also the “[[2500_config_apps:4200_report_designer:0300_edit_elements:1000_edit_subreports|Editing Sub-report/Sub-presentation Element]]” section. See also the “[[2500_config_apps:4200_report_designer:0300_edit_elements:1000_edit_subreports|Editing Sub-report/Sub-presentation Element]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="choose values from a list">+<anchor id="choose_values_from_a_list"> 
 +<accordion-item title="choose values from a list">
 If you want a user to pick attribute values from a list instead of (or in addition to) entering them manually while entering or editing a form of a business object you have to do the following: If you want a user to pick attribute values from a list instead of (or in addition to) entering them manually while entering or editing a form of a business object you have to do the following:
  
   - If the contents of the list are static, i.e. the list always contains the same values, then you have to configure the attribute to have “static” choices and define the values of these choices. While defining choices you can also specify whether other values are allowed or not. See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section for details.   - If the contents of the list are static, i.e. the list always contains the same values, then you have to configure the attribute to have “static” choices and define the values of these choices. While defining choices you can also specify whether other values are allowed or not. See the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section for details.
   - If the contents of the list are dynamic, i.e. you cannot define the values of the list up-front at the configuration stage, then select the “dynamic choices” radio button and define a query to run to determine choices. Alternatively, the list can represent a related business object and the attribute can be a reference to this business object. For example, if you want a user to choose the type of the car from the list on a form of the ''Car'' object (and you do not know all possible car types at the configuration stage), then you need to configure the ''CarType'' object and get the ''Car'' object to refer to the ''CarType'' object through the reference attribute called ''MyCarType''. Also when defining presentation properties of the ''MyCarType'' attribute you have to specify that the attribute should be represented by the drop down list rather than by the relationship table (see the “[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]” section).   - If the contents of the list are dynamic, i.e. you cannot define the values of the list up-front at the configuration stage, then select the “dynamic choices” radio button and define a query to run to determine choices. Alternatively, the list can represent a related business object and the attribute can be a reference to this business object. For example, if you want a user to choose the type of the car from the list on a form of the ''Car'' object (and you do not know all possible car types at the configuration stage), then you need to configure the ''CarType'' object and get the ''Car'' object to refer to the ''CarType'' object through the reference attribute called ''MyCarType''. Also when defining presentation properties of the ''MyCarType'' attribute you have to specify that the attribute should be represented by the drop down list rather than by the relationship table (see the “[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]” section).
-</panel>+</accordion-item>
  
-<panel type="primary" title="set up system menu">+<anchor id="set_up_system_menu"> 
 +<accordion-item title="set up system menu">
 //**AwareIM**// automatically generates the menu for the configured application. The default menu includes very generic operations that allow you to create any business object, run any query or start any process. In most cases you would probably like to customize the generic menu and include the menu items that create specific objects, run specific queries or start specific processes. For details on how to do this see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor:0500_defining_layout_of_content_panels:1100_setting_menu_item_props|Setting Menu Item Properties]]” section.  //**AwareIM**// automatically generates the menu for the configured application. The default menu includes very generic operations that allow you to create any business object, run any query or start any process. In most cases you would probably like to customize the generic menu and include the menu items that create specific objects, run specific queries or start specific processes. For details on how to do this see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor:0500_defining_layout_of_content_panels:1100_setting_menu_item_props|Setting Menu Item Properties]]” section. 
  
 You can also provide your custom menu in addition to or instead of the menu generated by //**AwareIM**//. See [[3400_how_to:0200_forms_and_user_interface]]. You can also provide your custom menu in addition to or instead of the menu generated by //**AwareIM**//. See [[3400_how_to:0200_forms_and_user_interface]].
-</panel>+</accordion-item>
  
-<panel type="primary" title="set up custom menu">+<anchor id="set_up_custom_menu"> 
 +<accordion-item title="set up custom menu">
 If you do not want //**AwareIM**// to generate the menu for the configured system you can provide your own custom menu (or you can combine both menus). To do this: If you do not want //**AwareIM**// to generate the menu for the configured system you can provide your own custom menu (or you can combine both menus). To do this:
  
Line 120: Line 132:
   - Import this page as the Main Page of the visual perspective – see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor:0200_defining_frame_props|Setting Main Page Properties]]” section.   - Import this page as the Main Page of the visual perspective – see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor:0200_defining_frame_props|Setting Main Page Properties]]” section.
   - If you do not want //**AwareIM**// to generate its own menu, specify that the menu frame should not be present – see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor|Working With Visual Perspective Editor]]” section.   - If you do not want //**AwareIM**// to generate its own menu, specify that the menu frame should not be present – see the “[[2500_config_apps:1500_add_edit_vp:0100_working_with_vp_editor|Working With Visual Perspective Editor]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="customize colors and fonts">+<anchor id="customize_colors_and_fonts"> 
 +<accordion-item title="customize colors and fonts">
 Colors and fonts of your application can be specified when defining visual perspectives. A particular set of colors and fonts is called a “theme”. You can choose different pre-defined themes for your visual perspective. You can also customize a theme by overriding its CSS style settings in your own .CSS file as described here: Colors and fonts of your application can be specified when defining visual perspectives. A particular set of colors and fonts is called a “theme”. You can choose different pre-defined themes for your visual perspective. You can also customize a theme by overriding its CSS style settings in your own .CSS file as described here:
 [[3400_how_to:0200_forms_and_user_interface]] [[3400_how_to:0200_forms_and_user_interface]]
-</panel>+</accordion-item>
  
-<panel type="primary" title="display a hierarchy of related records">+<anchor id="display_a_hierarchy_of_related_records"> 
 +<accordion-item title="display a hierarchy of related records">
 You can display related records in a tree-like hierarchical fashion. For example, a design component (DesignComponent object) may consist of sub-components; each sub-component may consist of other sub-components etc. To display a hierarchy of such components in a tree you need to define a reference attribute (called for example, SubComponents) in the DesignComponent object that refers to multiple other components (also DesignComponent object) – see [[3400_how_to:0100_awareim_basics]]. You can display related records in a tree-like hierarchical fashion. For example, a design component (DesignComponent object) may consist of sub-components; each sub-component may consist of other sub-components etc. To display a hierarchy of such components in a tree you need to define a reference attribute (called for example, SubComponents) in the DesignComponent object that refers to multiple other components (also DesignComponent object) – see [[3400_how_to:0100_awareim_basics]].
  
Line 133: Line 147:
  
 Another way of displaying a hierarchy is to display a standard grid of parent records first (Query using the Standard form) and then define a query that would show children records for a selected parent. Then set up the parent query to display the children query when a row is expanded (see [[2500_config_apps:1100_add_edit_queries|Adding/Editing Queries]] section). For each children query you can also display an operation to show its children when a row is expanded. Another way of displaying a hierarchy is to display a standard grid of parent records first (Query using the Standard form) and then define a query that would show children records for a selected parent. Then set up the parent query to display the children query when a row is expanded (see [[2500_config_apps:1100_add_edit_queries|Adding/Editing Queries]] section). For each children query you can also display an operation to show its children when a row is expanded.
-</panel>+</accordion-item>
  
-<panel type="primary" title="display Microsoft Outlook-like calendar">+<anchor id="display_microsoft_outlook_like_calendar"> 
 +<accordion-item title="display Microsoft Outlook-like calendar">
 To display your appointments, activities, meeting request in a calendar fashion similar to Microsoft Outlook do the following: To display your appointments, activities, meeting request in a calendar fashion similar to Microsoft Outlook do the following:
  
Line 142: Line 157:
   - You can also define a reference attribute that will point to the Appointment object. For example, you can define the Appointments attribute in the Doctor object. Go to the Presentation dialog of this attribute and choose "Calendar" from the "Display As" drop down. The calendar will be shown on the form of the Doctor object.   - You can also define a reference attribute that will point to the Appointment object. For example, you can define the Appointments attribute in the Doctor object. Go to the Presentation dialog of this attribute and choose "Calendar" from the "Display As" drop down. The calendar will be shown on the form of the Doctor object.
 For more details see "[[2000_concepts:0700_data_presentation:0300_query_results_calendar|Calendar Presentation of Query Results]]" and "[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]". For more details see "[[2000_concepts:0700_data_presentation:0300_query_results_calendar|Calendar Presentation of Query Results]]" and "[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]".
-</panel>+</accordion-item>
  
-<panel type="primary" title="synchronize with Google, Outlook, Exchange and other third party calendars">+<anchor id="synchronize_with_google_outlook_exchange_and_other_third_party_calendars"> 
 +<accordion-item title="synchronize with Google, Outlook, Exchange and other third party calendars">
 You can synchronize the appointment records stored in your AwareIM system with third party calendars, for example Google Calendar, Outlook, iCloud and so on. Synchronization with third party calendars in AwareIM is performed using Cronofy API, so before you can use synchronization you need to create an account with Cronofy ([[https://www.cronofy.com/|https://www.cronofy.com/]] ) and create an application for your Cronofy account.  Once you create an application with Cronofy you will be given “Client ID” and “Client Secret”. Write them down as you will need them in AwareIM. You can also see a full list of calendars that are supported at the Cronofy web site. You can synchronize the appointment records stored in your AwareIM system with third party calendars, for example Google Calendar, Outlook, iCloud and so on. Synchronization with third party calendars in AwareIM is performed using Cronofy API, so before you can use synchronization you need to create an account with Cronofy ([[https://www.cronofy.com/|https://www.cronofy.com/]] ) and create an application for your Cronofy account.  Once you create an application with Cronofy you will be given “Client ID” and “Client Secret”. Write them down as you will need them in AwareIM. You can also see a full list of calendars that are supported at the Cronofy web site.
  
Line 161: Line 177:
  
 Note that there is also a type of Panel Operation that synchronizes with a Google Calendar only. This operation type has now been superseded with a more generic operation and will be eventually phased out. However it can still be used now to synchronize with a Google Calendar. Note that there is also a type of Panel Operation that synchronizes with a Google Calendar only. This operation type has now been superseded with a more generic operation and will be eventually phased out. However it can still be used now to synchronize with a Google Calendar.
-</panel>+</accordion-item>
  
-<panel type="primary" title="show records in different colors">+<anchor id="show_records_in_different_colors"> 
 +<accordion-item title="show records in different colors">
 You can display records in different colors depending on some condition. For example, you might want to show overdue loans of a library member in red while showing non-overdue loans in black. To do this: You can display records in different colors depending on some condition. For example, you might want to show overdue loans of a library member in red while showing non-overdue loans in black. To do this:
  
Line 173: Line 190:
  
 For more details see the “[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]” section. For more details see the “[[2500_config_apps:0700_add_edit_attributes:0500_ref_attrib#Presentation_Options_For_References|Presentation Options for References]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="display different icons for different types of records">+<anchor id="display_different_icons_for_different_types_of_records"> 
 +<accordion-item title="display different icons for different types of records">
 You may want to show an icon next to a particular record when a record is displayed in different lists such as results of a query or a list of children on a form of the parent object. You may want to show different icons depending on the value of some attribute in the record – for example, show different icons depending on whether an e-mail is read or un-read. To do this you need to specify “presentation rules” in the presentation of the attribute. The rules specify which icons will be displayed under which conditions – for example if the value of the “State” attribute is “READ” display “read” icon, if the value is “UNREAD” display “unread” icon. Read more about presentation rules in the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section. You may want to show an icon next to a particular record when a record is displayed in different lists such as results of a query or a list of children on a form of the parent object. You may want to show different icons depending on the value of some attribute in the record – for example, show different icons depending on whether an e-mail is read or un-read. To do this you need to specify “presentation rules” in the presentation of the attribute. The rules specify which icons will be displayed under which conditions – for example if the value of the “State” attribute is “READ” display “read” icon, if the value is “UNREAD” display “unread” icon. Read more about presentation rules in the “[[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]” section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="display a form of a child object inside the form of the parent object">+<anchor id="display_a_form_of_a_child_object_inside_the_form_of_the_parent_object"> 
 +<accordion-item title="display a form of a child object inside the form of the parent object">
 Define a reference attribute to the child in the parent object. Go to the Presentation dialog of this attribute, tick “Allow Inline Editing” checkbox, select the “Show Form for Each Row” radio button and then click on the “Details” button to select the form of the child object to be shown. Define a reference attribute to the child in the parent object. Go to the Presentation dialog of this attribute, tick “Allow Inline Editing” checkbox, select the “Show Form for Each Row” radio button and then click on the “Details” button to select the form of the child object to be shown.
-</panel>+</accordion-item>
  
-<panel type="primary" title="display attributes in different colors">+<anchor id="display_attributes_in_different_colors"> 
 +<accordion-item title="display attributes in different colors">
 If you want to display certain attributes of an object on a form in different colors you can use HTML cells in a form layout and reference an attribute inside the cell. For example, if you want to display attribute “MyAttribute” of the object “MyObject” in red define the following HTML cell in your form layout: If you want to display certain attributes of an object on a form in different colors you can use HTML cells in a form layout and reference an attribute inside the cell. For example, if you want to display attribute “MyAttribute” of the object “MyObject” in red define the following HTML cell in your form layout:
  
Line 193: Line 213:
  
 If you want to show specific attribute values in different colors in queries you can define styles for the attribute as described above and then indicate that you want to use these styles in a particular query. To do this click on the “Details” button in the Display Results section and then click on the “More” button located next to the attribute entry and tick the “Use Attribute Styles” checkbox. If you want to show specific attribute values in different colors in queries you can define styles for the attribute as described above and then indicate that you want to use these styles in a particular query. To do this click on the “Details” button in the Display Results section and then click on the “More” button located next to the attribute entry and tick the “Use Attribute Styles” checkbox.
-</panel>+</accordion-item>
  
-<panel type="primary" title="display attributes as read-only">+<anchor id="display_attributes_as_read_only"> 
 +<accordion-item title="display attributes as read-only">
 //**AwareIM**// will automatically display “calculated” attributes and attributes protected by the ''[[ref:a_f:a:protect]]'' rules as read-only, but it will display them in a read-only text box. If you want to get rid of the text box you can use HTML cells in a form layout and reference an attribute inside the cell. For example, if you want to display the attribute “MyAttribute” of the object “MyObject” define the following HTML cell in your form layout: //**AwareIM**// will automatically display “calculated” attributes and attributes protected by the ''[[ref:a_f:a:protect]]'' rules as read-only, but it will display them in a read-only text box. If you want to get rid of the text box you can use HTML cells in a form layout and reference an attribute inside the cell. For example, if you want to display the attribute “MyAttribute” of the object “MyObject” define the following HTML cell in your form layout:
  
Line 201: Line 222:
  
 Note that you can also use expressions inside tags and use the HTML tags to display attributes as bold, colored, italicised etc. Note that you can also use expressions inside tags and use the HTML tags to display attributes as bold, colored, italicised etc.
-</panel>+</accordion-item>
  
-<panel type="primary" title="make an attribute visible, read-only, mandatory or display a different set of choices on a particular form only">+<anchor id="make_an_attribute_visible_read_only_mandatory_or_display_a_different_set_of_choices_on_a_particular_form_only"> 
 +<accordion-item title="make an attribute visible, read-only, mandatory or display a different set of choices on a particular form only">
 Normally you define whether an attribute is visible or read-only using dynamic business rules and you define whether an attribute is mandatory by ticking the “Required” property of the attribute. This makes the attribute visible, read-only or mandatory on all forms. There are scenarios, though where you want to make the attribute visible, read-only, mandatory or display a particular set of choices on a particular form only. To do this: Normally you define whether an attribute is visible or read-only using dynamic business rules and you define whether an attribute is mandatory by ticking the “Required” property of the attribute. This makes the attribute visible, read-only or mandatory on all forms. There are scenarios, though where you want to make the attribute visible, read-only, mandatory or display a particular set of choices on a particular form only. To do this:
  
Line 210: Line 232:
   - Click on the “Presentation rules” property.    - Click on the “Presentation rules” property. 
   - Define the appropriate presentation rule (conditional or unconditional) – select ACCESS as element type to make the attribute visible or read-only (specify this in the Element dialog) or select REQUIRED as element type to make the attribute mandatory or select Choices to display a different set of choices (for an attribute that has choices)   - Define the appropriate presentation rule (conditional or unconditional) – select ACCESS as element type to make the attribute visible or read-only (specify this in the Element dialog) or select REQUIRED as element type to make the attribute mandatory or select Choices to display a different set of choices (for an attribute that has choices)
-</panel>+</accordion-item>
  
-<panel type="primary" title="implement “wizard” forms">+<anchor id="implement_wizard_forms"> 
 +<accordion-item title="implement “wizard” forms">
 For simple “wizard” forms set the Type property in the Navigation section of the property window of the form to “Wizard”. When you do this sections of the form will be traversed in a “wizard-like” fashion. For more complex wizards use “[[2500_config_apps:1600_multistep|multi-step processes]]” – see more details about using wizards in //**AwareIM**// in this video tutorial. For simple “wizard” forms set the Type property in the Navigation section of the property window of the form to “Wizard”. When you do this sections of the form will be traversed in a “wizard-like” fashion. For more complex wizards use “[[2500_config_apps:1600_multistep|multi-step processes]]” – see more details about using wizards in //**AwareIM**// in this video tutorial.
  
 {{page>:5000_videos:590_multistep_processes&inline}} {{page>:5000_videos:590_multistep_processes&inline}}
-</panel>+</accordion-item>
  
-<panel type="primary" title="make your application “responsive” to different screen sizes">+<anchor id="make_your_application_responsive_to_different_screen_sizes"> 
 +<accordion-item title="make your application “responsive” to different screen sizes">
    
  
 {{page>:5000_videos:490_responsiveness&noheader&inline}} {{page>:5000_videos:490_responsiveness&noheader&inline}}
-</panel>+</accordion-item>
  
-<panel type="primary" title="recalculate values in controls dynamically after a user changes some values">+<anchor id="recalculate_values_in_controls_dynamically_after_a_user_changes_some_values"> 
 +<accordion-item title="recalculate values in controls dynamically after a user changes some values">
 Sometimes it may be necessary to dynamically recalculate values in controls of a form after a user has changed values in other controls. For example, let’s say we have a form of the object “MyObject” showing 3 attributes – “Value1”, “Value2” and “Sum”. We want to dynamically show the value of the attribute Sum as Value1 + Value2. We want the system to show the sum immediately after the user changes the values of Value1 or Value2. To do this we need to define a business rule: Sometimes it may be necessary to dynamically recalculate values in controls of a form after a user has changed values in other controls. For example, let’s say we have a form of the object “MyObject” showing 3 attributes – “Value1”, “Value2” and “Sum”. We want to dynamically show the value of the attribute Sum as Value1 + Value2. We want the system to show the sum immediately after the user changes the values of Value1 or Value2. To do this we need to define a business rule:
  
Line 230: Line 255:
  
 This is not different from any other business rule. The trick here is when defining the rule to go to the “Advanced” tab and tick the “Use rule in dynamic recalculation on forms” checkbox. If this is ticked //**AwareIM**// will automatically fire the rule when any field that the rule depends on loses focus, and display the result. This is not different from any other business rule. The trick here is when defining the rule to go to the “Advanced” tab and tick the “Use rule in dynamic recalculation on forms” checkbox. If this is ticked //**AwareIM**// will automatically fire the rule when any field that the rule depends on loses focus, and display the result.
-</panel>+</accordion-item>
  
-<panel type="primary" title="show/hide/disable/enable controls dynamically after a user changes some values">+<anchor id="show_hide_disable_enable_controls_dynamically_after_a_user_changes_some_values"> 
 +<accordion-item title="show/hide/disable/enable controls dynamically after a user changes some values">
 This is a variation of the previous item. Sometimes it may be necessary to dynamically show/hide controls on a form after a user has changed values in other controls. For example, let’s say we have a form of the object “MyObject” showing 2 attributes – “Value1” and “Value2””.  Value1 is of the Yes/No type and is shown as a checkbox. We want to dynamically show or hide the value of the attribute Value2 depending on whether the checkbox is ticked. To do this we need to define a business rule: This is a variation of the previous item. Sometimes it may be necessary to dynamically show/hide controls on a form after a user has changed values in other controls. For example, let’s say we have a form of the object “MyObject” showing 2 attributes – “Value1” and “Value2””.  Value1 is of the Yes/No type and is shown as a checkbox. We want to dynamically show or hide the value of the attribute Value2 depending on whether the checkbox is ticked. To do this we need to define a business rule:
  
Line 238: Line 264:
  
 This is not different from any other business rule. The trick here is when defining the rule to go to the “Advanced” tab and tick the “Use rule in dynamic recalculation on forms” checkbox. If this is ticked //**AwareIM**// will automatically fire the rule when any field that the rule depends on loses focus, and show/hide the appropriate controls. This is not different from any other business rule. The trick here is when defining the rule to go to the “Advanced” tab and tick the “Use rule in dynamic recalculation on forms” checkbox. If this is ticked //**AwareIM**// will automatically fire the rule when any field that the rule depends on loses focus, and show/hide the appropriate controls.
-</panel>+</accordion-item>
  
-<panel type="primary" title="start processes from forms">+<anchor id="start_processes_from_forms"> 
 +<accordion-item title="start processes from forms">
 It is sometimes necessary to have a button or a hyperlink on a form of the object that starts a process using the current instance of the object as a parameter. To implement such functionality you need to define an HTML cell and place a button or a hyperlink inside this cell (this is explained in detail in the [[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections:0100_defining_form_section|Editing Form Section Layout]] section. It is sometimes necessary to have a button or a hyperlink on a form of the object that starts a process using the current instance of the object as a parameter. To implement such functionality you need to define an HTML cell and place a button or a hyperlink inside this cell (this is explained in detail in the [[2500_config_apps:0500_add_edit_objects:0200_defining_forms:0300_form_add_sections:0100_defining_form_section|Editing Form Section Layout]] section.
-</panel>+</accordion-item>
  
-<panel type="primary" title="show Google Maps">+<anchor id="show_google_maps"> 
 +<accordion-item title="show Google Maps">
 You can display Google Maps in the following places in the system: You can display Google Maps in the following places in the system:
  
Line 268: Line 296:
   - When specifying Google Map options provide the query above and identify the attribute of the “Polygon” object that stores the KML data of the polygon.   - When specifying Google Map options provide the query above and identify the attribute of the “Polygon” object that stores the KML data of the polygon.
 Note: Some usages of Google Maps require you to create an account and specify a special key. If you need to provide a key for your Google Maps account you can do this in the predefined ''GoogleMapsKey'' attribute of the ''SystemSettings'' object. Note: Some usages of Google Maps require you to create an account and specify a special key. If you need to provide a key for your Google Maps account you can do this in the predefined ''GoogleMapsKey'' attribute of the ''SystemSettings'' object.
-</panel>+</accordion-item>
  
-<panel type="primary" title="show thumbnails">+<anchor id="show_thumbnails"> 
 +<accordion-item title="show thumbnails">
 To show pictures as thumbnails you need to have an attribute of the Picture type defined in some business object. Then you can define a query that would show this attribute in the query results. The presentation properties of the Picture attribute allow you to specify scaling options for pictures displayed by queries. To show pictures as thumbnails you need to have an attribute of the Picture type defined in some business object. Then you can define a query that would show this attribute in the query results. The presentation properties of the Picture attribute allow you to specify scaling options for pictures displayed by queries.
  
 Perhaps a better way to display thumbnails is to use the custom presentation for queries and select the “Thumbnails” data template. This is described in the “[[2500_config_apps:1100_add_edit_queries:0200_display_results|Displaying Query Results]]” section. Using this option you can also display descriptions of the picture underneath or above the picture (or both). Perhaps a better way to display thumbnails is to use the custom presentation for queries and select the “Thumbnails” data template. This is described in the “[[2500_config_apps:1100_add_edit_queries:0200_display_results|Displaying Query Results]]” section. Using this option you can also display descriptions of the picture underneath or above the picture (or both).
-</panel>+</accordion-item>
  
-<panel type="primary" title="create dashboards and allow end users to customize them">+<anchor id="create_dashboards_and_allow_end_users_to_customize_them"> 
 +<accordion-item title="create dashboards and allow end users to customize them">
 To create a dashboard you need to define a visual perspective with at least one tab containing content panels. This is explained in the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section. You can define content panels containing results of queries, processes or HTML. Content panels can be laid out according to one of the available layouts. You can also allow end users to edit the initial layout – switch visibility of individual panels as well as move or resize them.  To create a dashboard you need to define a visual perspective with at least one tab containing content panels. This is explained in the “[[2500_config_apps:1500_add_edit_vp|Adding/Editing Visual Perspectives]]” section. You can define content panels containing results of queries, processes or HTML. Content panels can be laid out according to one of the available layouts. You can also allow end users to edit the initial layout – switch visibility of individual panels as well as move or resize them. 
  
 {{page>:5000_videos:580_user_defined_dashboards&inline}} {{page>:5000_videos:580_user_defined_dashboards&inline}}
-</panel>+</accordion-item>
  
-<panel type="primary" title="implement item reordering within a grid or custom query">+<anchor id="implement_item_reordering_within_a_grid_or_custom_query"> 
 +<accordion-item title="implement item reordering within a grid or custom query">
 //**AwareIM**// supports reordering of items using drag and drop within grids (standard query results) and custom query views (custom query results).  //**AwareIM**// supports reordering of items using drag and drop within grids (standard query results) and custom query views (custom query results). 
  
Line 292: Line 323:
  
 Once you have defined processes to handle item reordering you can start configuring it for those components that need to support it. Go to the “Drag-and-drop/Reordering” property of standard or custom queries, select the “Allow Reordering” radio button and specify the process that handles item reordering. Once you have defined processes to handle item reordering you can start configuring it for those components that need to support it. Go to the “Drag-and-drop/Reordering” property of standard or custom queries, select the “Allow Reordering” radio button and specify the process that handles item reordering.
-</panel>+</accordion-item>
  
-<panel type="primary" title="implement drag-and-drop between grids">+<anchor id="implement_drag_and_drop_between_grids"> 
 +<accordion-item title="implement drag-and-drop between grids">
 A record can be dragged from one grid represented by a standard query to another grid represented by some other standard query. Note that this will only work if both queries query on the same business object. A record can be dragged from one grid represented by a standard query to another grid represented by some other standard query. Note that this will only work if both queries query on the same business object.
  
Line 300: Line 332:
  
 You then need to open the “Drag-and-drop/Reordering property of the query, whose records are being dragged and tick the “Allow dragging records of this query” checkbox. Then you need to go to the same property of the target query and tick the “Allow dropping records of the same type” checkbox and then specify the process to be run. You then need to open the “Drag-and-drop/Reordering property of the query, whose records are being dragged and tick the “Allow dragging records of this query” checkbox. Then you need to go to the same property of the target query and tick the “Allow dropping records of the same type” checkbox and then specify the process to be run.
-</panel>+</accordion-item>
  
-<panel type="primary" title="use the “Screen Tour” feature">+<anchor id="use_the_screen_tour_feature"> 
 +<accordion-item title="use the “Screen Tour” feature">
 The “Screen Tour” feature allows configurators to add explanation to the elements of a form, query or visual perspective, so that the user can understand the screen better. The explanation of the element is displayed to the user at the bottom of the screen with the marker pointing to the element of the screen being displayed. The user can jump between the elements of the screen and //**AwareIM**// automatically scrolls to the element being explained and displays the marker for the element. This section explains how a configurator can add tours to forms, queries and visual perspectives.  The “Screen Tour” feature allows configurators to add explanation to the elements of a form, query or visual perspective, so that the user can understand the screen better. The explanation of the element is displayed to the user at the bottom of the screen with the marker pointing to the element of the screen being displayed. The user can jump between the elements of the screen and //**AwareIM**// automatically scrolls to the element being explained and displays the marker for the element. This section explains how a configurator can add tours to forms, queries and visual perspectives. 
  
Line 320: Line 353:
  
 For an example of using the Tour feature see the Photo Album sample application (visual perspectives for Author and Guest access levels) For an example of using the Tour feature see the Photo Album sample application (visual perspectives for Author and Guest access levels)
-</panel>+</accordion-item>
  
-<panel type="primary" title="add support for electronic signature to your application">+<anchor id="add_support_for_electronic_signature_to_your_application"> 
 +<accordion-item title="add support for electronic signature to your application">
 If you want end users to sign electronically using the mouse (or fingers or stylus pens on mobile devices) you can add support for the electronic signature to your applications. To do this you need to add an attribute of the Picture type to one of your objects. An electronic signature will be stored in this attribute as a PNG file. When defining properties of this attribute, tick the “Represents signature” checkbox. When you add such attribute to your form //**AwareIM**// will automatically show a signature component that will allow users to sign electronically. If you want end users to sign electronically using the mouse (or fingers or stylus pens on mobile devices) you can add support for the electronic signature to your applications. To do this you need to add an attribute of the Picture type to one of your objects. An electronic signature will be stored in this attribute as a PNG file. When defining properties of this attribute, tick the “Represents signature” checkbox. When you add such attribute to your form //**AwareIM**// will automatically show a signature component that will allow users to sign electronically.
-</panel>+</accordion-item>
  
-<panel type="primary" title="add right-to-left support">+<anchor id="add_right_to_left_support"> 
 +<accordion-item title="add right-to-left support">
 To enable RTL-support for a user make sure that the value of the RTL attribute in the user is set to Yes. The RTL attribute is a predefined attribute that is added by //**AwareIM**// automatically to all members of the ''SystemUser'' group. You can set the value of the RTL attribute by rules or explicitly from the user interface when the user record is created. To enable RTL-support for a user make sure that the value of the RTL attribute in the user is set to Yes. The RTL attribute is a predefined attribute that is added by //**AwareIM**// automatically to all members of the ''SystemUser'' group. You can set the value of the RTL attribute by rules or explicitly from the user interface when the user record is created.
-</panel>+</accordion-item>
  
-<panel type="primary" title="embed video in a form">+<anchor id="embed_video_in_a_form"> 
 +<accordion-item title="embed video in a form">
 You will need to define an attribute of the Document type in some object and then add an HTML cell to your form with the following contents: You will need to define an attribute of the Document type in some object and then add an HTML cell to your form with the following contents:
  
Line 336: Line 372:
  
 The div element is just to give width and height to the video. The actual video is embedded by a reference to the document attribute (''MyObject.DocumentAttribute'') The div element is just to give width and height to the video. The actual video is embedded by a reference to the document attribute (''MyObject.DocumentAttribute'')
-</panel>+</accordion-item>
  
-<panel type="primary" title="use CSS">+<anchor id="use_css"> 
 +<accordion-item title="use CSS">
 If you are familiar with the CSS technology then you can customize and enhance the look and feel of your //**AwareIM**// application. You can also improve “responsiveness” of your application by providing media-specific definitions for your screen elements. If you are familiar with the CSS technology then you can customize and enhance the look and feel of your //**AwareIM**// application. You can also improve “responsiveness” of your application by providing media-specific definitions for your screen elements.
  
Line 346: Line 383:
  
 Placing the files in these folders is all you have to do – at runtime //**AwareIM**// will automatically upload and use the files from these folders. Placing the files in these folders is all you have to do – at runtime //**AwareIM**// will automatically upload and use the files from these folders.
-</panel>+</accordion-item>
  
-<panel type="primary" title="use icon fonts to display an icon for a button">+<anchor id="use_icon_fonts_to_display_an_icon_for_a_button"> 
 +<accordion-item title="use icon fonts to display an icon for a button">
 There are many places in the Configuration Tool that you may need to use icons - when defining "panel" operations or "operations on records", when defining menu commands, tabs and so on. Every time you add an icon you need to specify its properties on the "Icon Settings" dialog. There are two methods of specifying an icon - you can just specify where in the file system the file representing the icon is - the file must be of the image type (png, jpg, gif and so on). The icon stored in the file should be 16 pixels wide and 16 pixels high. If you use this method, you should select the "Icon is represented by a file" radio button and select the icon file in the file system. There are many places in the Configuration Tool that you may need to use icons - when defining "panel" operations or "operations on records", when defining menu commands, tabs and so on. Every time you add an icon you need to specify its properties on the "Icon Settings" dialog. There are two methods of specifying an icon - you can just specify where in the file system the file representing the icon is - the file must be of the image type (png, jpg, gif and so on). The icon stored in the file should be 16 pixels wide and 16 pixels high. If you use this method, you should select the "Icon is represented by a file" radio button and select the icon file in the file system.
  
Line 358: Line 396:
  
 What if you want to use icons from some other font? In this case you need to provide the definition of this font in your own CSS file (see [[3400_how_to:0200_forms_and_user_interface]]). Or you can just add the CSS file provided by the font maker to the ''AwareIM/Tomcat/webapps/AwareIM/Custom/CSS'' folder What if you want to use icons from some other font? In this case you need to provide the definition of this font in your own CSS file (see [[3400_how_to:0200_forms_and_user_interface]]). Or you can just add the CSS file provided by the font maker to the ''AwareIM/Tomcat/webapps/AwareIM/Custom/CSS'' folder
-</panel>+</accordion-item>
  
-<panel type="primary" title="display colour editor">+<anchor id="display_colour_editor"> 
 +<accordion-item title="display colour editor">
 Sometimes you need to store a colour, which you can edit using a colour editor. To do this define an attribute of the Plain Text type in an object – this attribute will store a textual value of the colour (need about 10 characters). Change the ''Content'' property of the attribute to specify ''Colour''. When you do this the attribute will be displayed using a Colour Picker widget on forms. If this attribute is used in queries it will be displayed as a box with the background colour stored in the attribute. If you want to display textual values go to the ''Display Format'' property of the query column and select ''Text''. Sometimes you need to store a colour, which you can edit using a colour editor. To do this define an attribute of the Plain Text type in an object – this attribute will store a textual value of the colour (need about 10 characters). Change the ''Content'' property of the attribute to specify ''Colour''. When you do this the attribute will be displayed using a Colour Picker widget on forms. If this attribute is used in queries it will be displayed as a box with the background colour stored in the attribute. If you want to display textual values go to the ''Display Format'' property of the query column and select ''Text''.
-</panel>+</accordion-item>
  
-<panel type="primary" title="let users edit images stored in attributes of the Picture type">+<anchor id="let_users_edit_images_stored_in_attributes_of_the_picture_type"> 
 +<accordion-item title="let users edit images stored in attributes of the Picture type">
 Select the Picture attribute in the list of attributes of the object or on a particular form. Go to the ''Display Settings'' property. Then tick the ''Allow cropping and resizing'' checkbox. After you do this end users will be able to crop and/or resize images stored in this attribute. Select the Picture attribute in the list of attributes of the object or on a particular form. Go to the ''Display Settings'' property. Then tick the ''Allow cropping and resizing'' checkbox. After you do this end users will be able to crop and/or resize images stored in this attribute.
-</panel>+</accordion-item>
  
 </accordion> </accordion>