Tables and ControlPanel Controls

The first display to be discussed is the tabular display, or more precisely their DisplayDefinition and its subtypes. As mentioned earlier, several table-based display objects are at our disposal in the system. All of these derive from a DisplayDefinition, so the main difference lies in the set HTML code fragment. This will be discussed later in detail.

The tabular displays themselves serve only as view descriptors, that is why each DataDefinition has a related data definition file that is called DataDefinition. DataDefinitions define the data source for the different displays. Both the data and the display definition are reusable.

Location within the system

Its physical location is in the DisplayDefinition directory of the XML package. Here also, there is a restriction concerning file naming. File names must match the DisplayDefinition{0}.xml format where the {0} parameter is the unique identifier of the DisplayDefinition. Grids as display objects always appear embedded in a component/component tab.

Grids in the system

As shown above, where a display object can appear, there can be a DisplayDefinition as well. Its relation is restricted to the component (due to being embedded).

Subtypes

As mentioned above, a DisplayDefinition as a display can appear in the system in various ways. Each of the following subtypes can be set in a descriptor. These subtypes may be the following:

  • Table: Tabular display with filtering controls and export option. This is the only subtype that supports the display of summary row.
  • TransposedTable: Transposed tabular display
  • Card: Data is displayed row by row on cards, the size of which is fixed and identical by default. Effector places these cards horizontally in a row until they fit. Once they no longer fit, a new row is opened. Cards can also be grouped.
  • CardMatrix: This view is used to create a matrix-like display of data.
  • Tree: It can be used to display a tree structure. Most often this subtype is applied to demonstrate the state of workflows.
  • Calendar: Similar to the day view of typical task calendars, the calendar display offers filtering options to set the number of days to be displayed.
  • SectionList: It is similar to the CardView, where data is displayed in a strict sorting order. Individual data rows appear continuously, one under the other, without spacing. It is excellent for generating an HTML-like page based on the data.

The subtype can be specified in the ViewType and AlternateViewType settings. The primary display is given by the ViewType. In case of certain subtypes, an AlternateViewType can be specified. In such a case an icon appears on the interface which, when clicked, allows to make a choice between the two subtypes.

Available features

  • Configuring the grid view
  • Setting unique identifiers to records
  • Defining visible/editable columns
  • Setting the visibility of the toolbar
  • Setting the visibility of functions on the toolbar
  • Defining filters and action buttons
  • Using dynamic grids
  • Configuring subtypes and type-specific functions
  • Configuring linked objects
  • Configuring inplace editing

Example:

<DisplayDefinition xmlns="http://effector.hu/schema/ns/displaydefinition">
    <Caption>People</Caption>
    <DataDefinition>DataDefinitionPeoples</DataDefinition>
    <OrderBy>Name</OrderBy>
    <UniqueIDColumn>PeopleID</UniqueIDColumn>
    <UniqueBusinessObject>BusinessObjectPeople</UniqueBusinessObject>
    <OutFilterColumn>PeopleID</OutFilterColumn>
    <ViewType>Table</ViewType>
    <ToolbarOptions>
        <IsCardGroupLayoutChangeEnabled>false</IsCardGroupLayoutChangeEnabled>
    </ToolbarOptions>
    <TableViewOptions />
    <Columns>
        <Column name="PeopleID">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="CompanyID">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="Title">
            <Caption>Title</Caption>
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="Name">
            <Caption>Név</Caption>
        </Column>
        <Column name="CompanyName">
            <Caption>Company name</Caption>
        </Column>
        <Column name="Jobtitle">
            <Caption>Title</Caption>
        </Column>
        <Column name="Fax">
            <Caption>Fax</Caption>
        </Column>
        <Column name="Phone">
            <Caption>Phone</Caption>
        </Column>
        <Column name="Mobile">
            <Caption>Mobile</Caption>
        </Column>
        <Column name="Email">
            <Caption>E-Mail</Caption>
        </Column>
        <Column name="City">
            <Caption>City</Caption>
        </Column>
        <Column name="Zip">
            <Caption>ZIP</Caption>
        </Column>
        <Column name="Street">
            <Caption>Street</Caption>
        </Column>
        <Column name="IsGroup">
            <Caption>Group</Caption>
        </Column>
        <Column name="ReportsTo">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="ReportsToName">
            <Caption>Reports to</Caption>
        </Column>
        <Column name="CreatedbyID">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="CreatedBy">
            <Caption>Created by</Caption>
        </Column>
        <Column name="IsResource">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="Active">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="PrivateContact">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
        <Column name="Department">
            <Visible type="Constant" return="boolean" default="false">false</Visible>
        </Column>
    </Columns>
    <ControlPanel>
        <ManualSearchTriggering>true</ManualSearchTriggering>
        <Controls>
            <Control>
                <!-- <DefaultValue type="Constant" return="string" default="">[##Session.CompanyName##]</DefaultValue> -->
                <Name>CompanyText</Name>
                <Type>TextSearch</Type>
                <Caption>Company name</Caption>
                <ConnectedColumnDefinition>c.Name</ConnectedColumnDefinition>
                <Operator>like%</Operator>
                <SessionValue type="Constant" return="string" default="">[##Session.CompanyName##]</SessionValue>
            </Control>
            <Control>
                <Name>PeopleText</Name>
                <Type>TextSearch</Type>
                <Caption>Name</Caption>
                <ConnectedColumnDefinition>pe.Name</ConnectedColumnDefinition>
                <Operator>%like%</Operator>
            </Control>
            <Control>
                <Name>NewPeople</Name>
                <Type>NewObjectButton</Type>
                <Caption>New</Caption>
                <ReferencedMinorMenu>MMExample</ReferencedMinorMenu>
                <Screen>ScreenPeople</Screen>
                <BusinessObject>BusinessObjectPeople</BusinessObject>
            </Control>
        </Controls>
    </ControlPanel>
    <Links>
        <Link>
            <ColumnName>CompanyName</ColumnName>
            <Screen>ScreenCompany</Screen>
            <ReferencedMinorMenu>MMExample</ReferencedMinorMenu>
        </Link>
        <Link>
            <ColumnName>Name</ColumnName>
            <Screen>ScreenPeople</Screen>
            <ReferencedMinorMenu>MMExample</ReferencedMinorMenu>
        </Link>
    </Links>
</DisplayDefinition>

Non-subtype specific settings

By using the simple nodes located in the root element, the following can be configured:

  • The tag of the grid view, currently not in use on the interface. In the Effector Studio, (generally) this string is displayed instead of the file name. It is optional. Example: <Caption>Users</Caption>
  • The datasource of the grid has to be specified in the DataDefinition node. To create a reference, its DataDefinition ID must be used: <DataDefinition>DataDefinitionBaseUsers</DataDefinition>

  • PeopleID
  • The OrderBy node is responsible for the initial data order, its value contains the ID of the column (the name attribute of the column definition). The sort order direction can also be specified here by setting the direction attribute. The direction node can assume two values: Asc or Desc. Their operation corresponds with the sort order used for database management.
  • Communication among components requires the configuration of the OutFilterColumn node. Its value contains the ID of the column taking primary part in the communication. The communication is triggered by clicking on a row in the display object (or, in case of certain subtypes, on the element representing a record) and the value of the field specified here will be passed on to the connected components as an input filter parameter. The components will interpret and react to it if necessary.
  • The auto-refresh function can be regulated by the value configured in the AutoRefreshInterval node. Its value is understood in minutes. The lack of the node or setting its value to zero means that the auto-refresh function is disabled.
  • The tabular display objects support the paging function as well, which can be configured in the PageSize és az AlternatePageSize nodes. With the PageSizenode, the page size can be set, that is, the number of rows to be loaded by the Effector. Its default value is 100. If its value is -1, the Effector will load all rows, however, this setting is not advised. By setting the AlternatePageSize, the size of the page can be given for when clicking on the record counter. If its value is -1, all rows will be loaded, while in case of 0, the function is disabled. The default value of the AlternatePageSize is 0, that is when the counter is clicked nothing happens.
  • The visibility of the toolbar can be configured by setting the IsToolbarVisible node. It is an optional logical switch; it defaults to true.
  • Setting unique identifiers to records

With the help of the RowIdentificationMethod a feature can be specified with which a selected record will be identified. It can assume two possible values:

  • GeneratedGUID: in this case the system identified each row based on an individually generated ID. Advantage: a single row can be definitely selected Disadvantage: after a new record / refreshing, it will always select the first row.
  • UniqueIDColumnOrOutFilterColumn: it uses the value of the UniqueIDColumn node to identify the row and it references the column specified in OutFilterColumn when selecting. Advantage: it retains information on which row was selected, and it selects the row after a new record is added (if it is included in the requested page) Disadvantage: one identifier may mean several rows (it selects the rows correctly depending on configuration).

Setting the visibility of functions on the toolbar

The ToolbarOptions node includes the settings which turn the functions on the toolbar on or off. Some toolbar elements appear in case of certain subtypes only. In general, these settings can assume true or false values, where the default value is true. The available settings are:

  • IsCardGroupLayoutChangeEnabled: In case of Card views, it turns on/off the key regulating the grouping feature.
  • IsSelectionTypeTogglerVisible: It turns on/off multiple selection.
  • IsCardGroupLayoutChangeEnabled: In case of Card views, this setting regulates the visibility of the key that modifies grouping orientation.
  • IsRowNumberTogglerVisible: In case of Table views, it regulates the visibility of the key turning on/off the display of row numbers.
  • IsOpenAllColumnsButtonVisible: In case of Table views, it turns on/off the visibility of the key that opens columns.
  • IsToolsTogglerVisible: In case of Table views, it regulates the visibility of the key controlling the display of the tools column.
  • IsGroupingEnabled: It controls the visibility of the drop-down menu offering grouping options.
  • TrashCanActionControl: This setting defines which Control (typically a DeleteObjectButton type) on the ControlPanel is pressed when the trash can icon is clicked on the toolbar.
  • DefaultSelectionType: The default row (or card) selection can be set with this setting. Is value can be Single or Multiple. Its default value is Single.

Table subtype specific settings

The settings specific to the Table subtype are grouped under the TableViewOptions node.

  • The IsSimpleFilterEnabled node is used to hide or show the simple filters. Its value is a simple boolean True or False. If the node is absent, the simple filters are visible.
  • The IsRowNumberVisible setting controls the visibility of the column containing the row numbers. Its value may be true or false. It defaults to false.
  • The IsMultilineRowsEnabled setting turns on the feature that allows variable row height depending on content. The maxLineNumber attribute defines the maximum number of rows the system can break a text into, while the minLineNumber attribute specifies the default number of rows in a cell. The row height calculation can be set in IsMultiline when columns are defined, the system draws on the values of these columns when calculating row heights.
  • The HeaderHeight setting defines in pixels the height of the header. For a two-row header the value should be 48.
  • The GroupBy setting allows to set the default column based on which the table rows are grouped. In the direction attribute, the direction of grouping can be specified, its value may be Asc or Desc.
  • The IsPinningEnabled setting regulates the visibility of the drop-down menu allowing column pinning. Its value can be True or False. Its default value is true, that is, the drop-down list is visible.
  • The IsEditToolVisible setting regulates the visibility of the pencil icon in the column containing the tools. The pencil icon basically simulates a click on the Link bringing up the first Form. The automatic selection can be overridden in the columnName attribute. This setting should contain the name of the column the Link references.

Examples:

`<IsEditToolVisible>true</IsEditToolVisible>`

or

`<IsEditToolVisible columnName="PeopleName">true</IsEditToolVisible>`
  • The 'IsCardPreviewToolVisible' setting regulates the visibility of the Card display button in the Tools column. It is visible only if the Card ViewType or AlternateViewType is defined.
  • The IsDeleteToolVisible setting regulates the visibility of the Delete button in the Tools column. The name of the push-button assigned the delete function has to be set is the actionControl attribute. (It is the DeleteObjectButton defined on the CotrolPanel).
  • The display object can group the columns of the grid. In such cases, an additional header appears above the column labels, in which the column groups are listed. The column groups can be defined in the ColumnGroups node.

Example:

<ColumnGroups excludedColumnsGroupCaption="">
    <ColumnGroup name="cim_elotti">
        <Caption />
    </ColumnGroup>
    <ColumnGroup name="title">
        <Caption> Title</Caption>
    </ColumnGroup>
</ColumnGroups>

In the example above, an untitled group is created followed by a group with the caption Title, after which further columns are displayed, again with no caption (excludedColumnsGroupCaption attribute).

The group to which a column belongs should be specified upon defining that particular column.

  • The display object can display a summary row (also by groups in case of grouping). The definition of the summary row is done with the attributes under the Summary node. Only one setting can be defined for each column. One setting is done is the Summary node. This node’s
    • type attribute specifies the type of aggregation. Its value may be:
      • sum: adding up the values of the column
      • Average: calculating the average of the values in the column
      • Count: counting the number of values in the column
      • Maximum: calculating the maximum of the values in the column
      • Minimum: calculating the minimum of the values in the column
      • Custom: displaying arbitrary text below the column set in the Column attribute. The text should be specified as the value of the node.
    • The column to be aggregated has to be specified in the Column attribute.

Example:

<Summaries>
    <Summary type="Custom" column="CustomerName">Total:</Summary>
    <Summary type="Sum" column="Salary"></Summary>
    <Summary type="Average" column="DailyWork"></Summary>
</Summaries>
  • The ColumnCaptions node clusters the parameters of the dynamic column header collect function. In case of dynamic grids, the column header is, by default, the value returned by the query defined in the DataDefinition node. Replacing these headers with the result of a different query or a fixed value is an option. The source can be defined in the sourceType attribute. The value of this attribute may be Database or XML. The default value is Database. If the value of the sourceType is Database, the system uses the configurations clustered under the Database node, while in the other case, it processes the settings under the FixedValues node.

Example for Database:

SELECT Name, Caption FROM orn_ColumnCaptions WHERE DisplayDefinition = 'DisplayDefinitionDinamicReport'

Example for XML:

Available items (name) Available items (price) Remarks

Defining visible/editable columns

The setting and definition of visible columns in a table can be done in the Columns collection with the help of the Column nodes. The columns listed here will be defined in the table.

<Column name="PeopleName">
    <Caption>User</Caption>
    <Visible type="Constant" return="string" default="false">true</Visible>
</Column>
  • Each column must have a unique ID included in the name attribute of the Column. This ID is also the column name set in the DataDefinition node.
  • Setting the format of columns and their values by using the Format node is an option. For example: digit grouping # ### or # ###,00
  • The caption appearing in the header of the column can be set in the Caption node. In its absence, the name attribute of the Column node will appear (or the value set in the ColumnCaptions setting).
  • The InplaceEditControl/Type node offers another chance to format the column values. Its value can be Date, DateTime, TextBox or ComboBox. This will be discussed in detail in the inplace editing section.
  • By setting the Width node, the width of the columns can be adjusted. Its value has to be defined in pixels.
  • The IsMultiline node offers the possibility to display multi-line data.
  • The DisallowGrouping setting controls the grouping function of the column. Its default value is false, that is, the grouping option is allowed.

    • Every visible column (non-dynamic) (Visibility rule) can be included in a grouping.
    • If a column’s Visible value is true and its DisallowGrouping value is also true, the column values cannot be grouped.
    • If a column’s Visible value is false and its DisallowGrouping value is also false, the column values can still be grouped.
  • The DisallowSorting DisallowGroupingsetting controls the sorting function of the column. Its default value isfalse`, that is, the sorting option is allowed.

    • Every visible column (non-dynamic) (Visibility rule) can be included in a sorting.
    • If a column’s Visible value is true and its DisallowSorting value is also true, the column cannot be sorted.
    • If a column’s Visible value is false and its DisallowSorting value is also false, the column can still be sorted.
  • The IsPinned attribute defines if a column is pinned to the left. It defaults to false.
  • The data displayed in a cell can be formatted with the Format setting. Its possible values are:

    • Auto: the system automatically formats the content. It is the default setting.
    • ThousandGrouped: The data in the cell is displayed using thousand grouping. In the Precision attribute, the number of digits displayed in the fractional part of the figure can be set (the default value is 0).
    • Date: The system displays only the date part of the time value shown in the cell.
    • DateTime: The system displays the time value in the cell including date, hours and minutes.
    • DateTimeWithSeconds: The system displays the time value the cell including date, hours, minutes and seconds.

    • The header of the column can be formatted with the HeaderCssClass setting, its value is the name of the CSS class describing the format. Optional setting. The CSS classes have to be defined in the delivery/gfx/style.css file.
    • Column cells can also be formatted. To do so, the name of the column included in a DataDefinition XML and containing the name of the CSS class to be applied on the cell has to be specified in the CellCssClassColumn setting. The CSS classes have to be defined in the delivery/gfx/style.css file.
    • In the ColumnGroupName setting, the column group to which the column will belong can be specified.

The following rules can be applied to columns:

  • Visible: visibility rule
  • Readonly: Read-only rule. Currently works only in the table subtype. It regulates if editing is allowed for a given column in a table.

Inplace editing

In grid view, it is possible to edit cell contents. To enable this function, the InplaceEditControl node has to be configured. The Type attribute of this node specifies the input field with which the column contents can be edited. Currently the TextBox, Date, DateTime and ComboBox types are supported. In such cases, a ReadOnly RuleValueType should also be included in the Column node, where column cells can be edited in case of a false return value.

The process of editing is as follows: The system finds the definition in the DataDefinition based on the name of the DisplayDefinition column. For saving, it uses the column specified in the IdColumn node.

Below is a complex example of how to edit the column called Transaction:

  • Transaction true false TextBox
  • p.Name BusinessObjectProject ProjectID

When a user clicks on the “Transaction” column, an input field allowing a maximum of 300 characters opens up. Saving is done with the BusinessObjectProject. Consistent with the configuration, the business object ID in the database is located in the ProjectID column (it is configured in the IdColumn node of the Name column). Based on this, the system will refresh the Name field related to the ProjectID. For a seamless operation, the BusinessObject has to be set in all columns we want to make editable. Aliased or computed columns cannot be saved.

NOTE!: If the value of the Readonly rule is True, the fields will not be editable and the control responsible for editing will not be visible.

Configuring various controls

  • 1. car true ThousandGrouped false TextBox
  • Configuring ComboBox:

Example:

<Column name=" substituted_vehicleid">

    <Visible type="Constant" return="boolean" default="false">false</Visible>
</Column>
<Column name="substituted">
    <Caption>Planned type</Caption>
    <InplaceEditControl>
        <Type>ComboBox</Type>
        <KeyColumn> substituted_vehicleid</KeyColumn>
        <ComboDefinition>ComboVehicleTypes</ComboDefinition>
    </InplaceEditControl>
    <Readonly type="Constant" return="boolean" default="false">false</Readonly>    
    <Width>200</Width>
</Column>

It works slightly differently from what has been previously defined. Here, the user clicks on the column which shows the value as a string, but the identifier of the selected item will be saved into the column specified in the KeyColumn node. The value of the ID and the BusinessObject gets evaluated, but in this case the value will be stored in the column specified in the KeyColumn.

Using dynamic grids

We are talking about dynamic grids when the value of the /DisplayDefinition/IsDynamic node is True. In this case the system obtains all the available data from the DataDefinition and, employing the column definitions used there, it builds the display.

It can be used for any kind of query. Its importance lies in that in case of a dynamic datasource the system automatically adapts to the incoming records, so the number of columns may change depending on the datasource.

Its typical usage for example is displaying the calendar days in a grid. In this case we select a transposed dataset from the database where the individual days will be the columns. This way we can make the display depend on a filter.

Columns can still be defined in the DisplayDefinition xml file, in this case – if the DataDefinition returns the column with the specific name – the system reads the settings to be rendered to the columns (Caption, Visible, formatting).

In case of pivot queries, in general, the name of the column is an ID. In such cases, the values belonging to individual IDs can be specified in the ColumnCaptions node. The ColumnCaptions node can have a sourceType attribute with Database or XML value.

  • Database: It is the default value. Here an SQL statement has to be given in the ColumnCaptions/Database/SelectionString node, which returns the column captions to the individual IDs. The SQL statement should return “Name” and “Caption” columns.
  • XML: In this case the ColumnCaptions/FixedValues node is a collection of Caption nodes. The columnName attribute of the Caption nodes featured in the ColumnCaptions collection contains the ID (column name), while the value of the node indicates the caption to be displayed.

Defining filters and action buttons

In the system, the input fields and buttons that are placed above the table view and filter the data of the table or perform actions on it are called ControlPanel Controls.

ControlPanel Controls

Their definition can be done in the DisplayDefinition/ControlPanel/Controls list, although their operation is affected by the following values set at a higher level:

  • DisplayDefinition/ControlPanel/ManualSearchTriggering: Here we can set the action that triggers the filters of the table to start the query on the server. If the node’s value is True, the Filter key on the interface has to be clicked to launch filtering. In this case, filtering is carried out manually, that is, no query is done each time a filter is modified.

<ManualSearchTriggering>true</ManualSearchTriggering>

Nodes used to set the ControlPanel Controls:

  • Name: It is the unique ID of the control. There cannot be two identical ID in the DisplayDefinition .
  • Type: It defines the type of the ControlPanel Control. The configuration of the types will be discussed in detail at a later point. Its possible values are:

    • ActionButton: It represents a push-button, which can assume various functions. For example: calling a function of an external module, generating documents, mass data modification, etc.
    • TextSearch: A single-line text editing control for free text search.
    • ComboSearch: : Using a ComboBox control, it implements a filtering method from a list of given values.
    • BoolSearch: Featuring a three-state checkbox control, it is used for filtering on a bool-type column.
    • DateSearch: Is facilitates date filtering with the help of a date-time picker control.
    • DateRange: It is used for date range filtering.
    • TagCloud: It is used for tag cloud filtering.
    • QuerySearch: this filter is similar to a ComboBox, with the difference that here a window pops up with the available values to select (where values are selected from a grid).
    • NewObjectButton: It is a push-button, with which a new object can be added. In this case, Effector brings up the screen configured in the Screen setting (and the form displayed on that screen will register a new row in the database).
    • DeleteObjectButton: It is a push-button with which objects can be deleted. In such cases, the BusinessObject setting is mandatory and the BusinessObject specified there will perform the deletion.
    • SimpleLinkButton: It is a push-button, which will open the screen specified in the Screen setting.
  • ConnectedColumnDefinition: It is the column tied to the filter. Here a valid SQL expression or SQL column based on and fitting into the SQL statement of the DataDefinitionhas to be specified. Occasionally, the use of fully qualified table names is necessary. For example:pep.PeopleID`

  • Operator: The SQL operator used for filtering. The use of operators is not possible with each filter field, for example in case of date range filtering the like operator cannot be used... Their usage is similar to the WHERE operators typically found in the SQL server. Its possible values are:

    • %like%, like%, %like
    • =, <, >, <=, >=, <>
    • in: here the Query node must also be set, which will generate the result set on the right-hand side of the expression.
    • between: it can be used with date ranges (DateRange), where the starting date will replace {0} and the end date will replace {1}. For example: <ConnectedColumnDefinition>(f.Deadline BETWEEN '{0}' AND '{1} 23:59:59.999')</ConnectedColumnDefinition>
  • Caption: Caption above the filter or on the push-button.
  • Query: This can only be used with the in operator. Here an SQL WHERE expression has to entered, which gives the right-hand side of the statement to be evaluated in connection with the column specified in the ConnectedColumnDefinition. So, the WHERE clause of the SQL statement that has been formed during the filtering will be extended with the following part: ConnectedColumnDefinition in (content of Query). If the value of the Query contains the string #param#, it will be replaced with the value of the ControlPanel Control. Typically, this is used for filtering the select statement in the Query node.
  • Width: Specifies the width of the control (in pixels).
  • DisplayOverColumn: This node should be set if we want to display the control below the header of a column in the table rather than on the ControlPanel. Its value should be the Name attribute of the column under whose header the filter be placed. Optional setting.

The following rules can be used for the configuration:

  • Visible: Visibility rule
  • Readonly: Read-only rule. It regulates if editing is allowed.
  • Required: The filter must be filled in (not applicable for all filters).
  • DefaultValue: Default value rule with which the default value of the filter can be set (not applicable for all filters).
  • SessionValue: This rule is used for the evaluation of the home icon found on the input field. If no SessionValue rule is set for the control, the icon remains invisible (not applicable for all filters).
  • ComputedValue: This rule is used for the evaluation of a computed field. With this setting, the value of a filter can be dynamically computed based on the value returned by the filter (not applicable for all filters).
  • Tooltip: With this setting, we can set a short explanatory text (aka tooltip) for the filter.
  • PlaceHolder: Text used to fill in an empty filter field (not applicable for all filters).

Examples:

Simple text filter:

<Control>
    <Name>DescriptionText</Name>
    <Type>TextSearch</Type>
    <Caption>Description</Caption>
    <ConnectedColumnDefinition>e.Description</ConnectedColumnDefinition>
    <Operator>like%</Operator>
</Control>

Simple checkbox:

<Control>
    <Name>DoneCheckBox</Name>
    <Type>BoolSearch</Type>
    <Caption>Done</Caption>
    <ConnectedColumnDefinition>e.Done</ConnectedColumnDefinition>
    <Operator>=</Operator>
    <DefaultValue type="Constant" return="string" default="false">false</DefaultValue>
</Control>

Now, we are going to discuss the definition of the subtypes of certain ControlPanel Controls, that is, the type-dependent special settings.

ComboSearch

The drop-down list filter appears on the interface. The items on the drop-down list are determined by the ComboDefinition node. For further information, please refer to ComboDefinition.

With the combined use of LookupFilterName and LookupFilterValue, the items of the drop-down list can be further narrowed. (In this case the WHERE part of the SQL statement found in the ComboDefinition must contain the 1=1 part.) These two settings are optional.

Example:

<Control>
    <Name>ComboCountry</Name>
    <Type>ComboSearch</Type>
    <Caption>Country</Caption>
    <ConnectedColumnDefinition>c.Country</ConnectedColumnDefinition>
    <Operator>=</Operator>
    <ComboDefinition>ComboFixedValuesLookup</ComboDefinition>
    <LookupFilterName>GroupNum</LookupFilterName>
    <LookupFilterValue>1</LookupFilterValue>
</Control>

NewObjectButton

This button is used to generate a new object. Its mandatory settings are:

  • Screen: It defines the screen to be brought up to create a new object.
  • BusinessObject: It defines the business object (or its subtypes) to be created when the button is pressed.

Optional settings:

  • Using the Target attribute, it can be configured that the pop-up screens will open in a new browser tab, rather than in the current one.

In the following example, the button will create a new event.

Example:

<Control>
    <Name>NewEvent</Name>
    <Type>NewObjectButton</Type>
    <ReferencedMinorMenu>MMPEP</ReferencedMinorMenu>
    <BusinessObject>BusinessObjectEvent</BusinessObject>
    <Screen>ScreenEvent</Screen>
    <Caption>New event</Caption>
</Control>

DeleteObjectButton

This button is used to delete selected data rows. For the deletion, we have to specify the business object that will carry out the deletion, the column containing the unique ID to be deleted. In the example below the BusinessObjectDocument business object is used for the deletion for which it takes the ID from the DocumentID column.

Example:

<Control>
    <Name>DeleteDocument</Name>
    <Type>DeleteObjectButton</Type>
    <Caption>Delete</Caption>
    <BusinessObject idColumn="DocumentID">BusinessObjectDocument</BusinessObject>
</Control>

SimpleLinkButton

When clicking on the button, Effectors opens a screen. In the Screen setting, we can set the type of scree to be opened.

Example:

<Control>
    <Type>SimpleLinkButton</Type>
    <Name>PSProjectCompare</Name>
    <Caption>TBC compare</Caption>
    <Screen>ScreenTopicBusinessCaseCompare</Screen>
</Control> 

Optional settings:

  • Using the Target attribute, it can be configured that the pop-up screens will open in a new browser tab, rather than in the current one.

ActionButton

This filter type is used to implement various unique business logics.

Modifying the appearance of the button : Done with the help of the ButtonLooksLike node. Optional setting. It is applicable in case of Link-type ActionButtons. Here we can specify which button the given button should resemble. Its possible values are: DeleteObjectButton, NewObjectButton, Auto.

The OnButtonClick/ActionType node defines the type of the push-button, that is, the type of action it will prompt. Its possible values are:

  • OpenUrl: The button opens a URL in a new window.
  • Outer and Report: To call upon an external DLL, this should be set. In case of creating new interfaces, there is no difference between the two.
  • ProcessResultSet: It means a button with a ProcessResultSet function.
  • GenerateDocument: With this button the built-in document creating function will be launched.
  • Export: This button will use the built-in export function.
  • ActionButtonChain: With this button we can simulate the sequential pressing of several other buttons.

OpenURL

When pressed, it opens the website set in the URL field in a pop-up window (or on a tab, depending on browser setting).

  • Url: The URL of the page to be opened has to be entered here. Effector opens the configured URL in a new window (or tab).
  • UrlWindowOptions: the parameters of the pop-up window can be specified here. For example: menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes

Example

<Control>
    <Name>UrlLink</Name>
    <Type>ActionButton</Type>
    <Caption>External hyperlink</Caption>
    <OnButtonClick>
        <ActionType>OpenUrl</ActionType>
        <Url>http://www.google.com</Url>
        <UrlWindowOptions></UrlWindowOptions>
    </OnButtonClick>
</Control>

Outer and Report

The ControlPanel Control, responsible for outer function calls, queries into a given class of a configured module. This can be set up with the Module node. This node will contain the technical details with which it will access the implementing class.

<Module classname="orn_Sample.SpecProjectPDFExportButton" action="Example action">[##LocalProgramPath##]\Sample.dll</Module>

The value of the Module node is the name and fully qualified path of the module to be called. The system replaces the usable string [##LocalProgramPath##] with its own path. For example: C:\Inetpub\wwwroot\Sample\bin.

The Classname attribute defines the class in the module, which class has to implement a special interface (IControlPanelControl). The implementation of this interface guarantees the proper operation.

In case of this ControlPanel Control subtype, the value of the Action attribute is free text which will be passed on as parameter when calling upon an external DLL.

ExcelExport

It displays a button which, when pressed, exports the values of a given table once the options of the Excel Export function are set.

Example

<Control>
    <Name>export</Name>
    <Type>ActionButton</Type>
    <Caption>Excel export</Caption>
    <OnButtonClick>
        <ActionType>Export</ActionType>
    </OnButtonClick>
</Control>

Further options for ExcelExport

<Control>
    <Name>export</Name>
    <Type>ActionButton</Type>
    <Caption>Excel export</Caption>
    <OnButtonClick>
        <ActionType>Export</ActionType>
        <DataSources>
            <DataSource filterType=”Out”>DisplayDefinitionRTActions</DataSource>
            <DataSource filterType=”In”>DisplayDefinitionRTBOMethods</DataSource>
        </DataSources>
        <ExcelTemplate>interim_template_u16ext</ExcelTemplate>
    </OnButtonClick>
</Control>

In the DataSources node collection, we can list the DisplayDefinitions (without prefix and extension) that we want to export. If no DisplayDefinition is specified, the content of the current screen will be exported.

In the filterType attribute, we can set whether the input or the output filters be passed on when exporting, that is, which of the input or output filters of the view where the button was pressed be given to the export process. Optional attribute with two possible values: In or Out. The default setting is Out.

In the ExcelTemplate node, we can set the excel template where we want to export to; this should be specified in the TemplateName field of the ExcelTemplate data table.

CREATE TABLE [dbo].[ExcelTemplate](
    [TemplateID] [int] IDENTITY(1,1) NOT NULL,
    [TemplateName] [varchar](200) NULL,
    [TemplatePath] [varchar](500) NULL,
    [TemplateTitle] [varchar](200) NULL,
    [Description] [varchar](max) NULL,
    [Deleted] [tinyint] NULL
)

Fields:

  • TemplateID: unique identifier
  • TemplateName: the identifier of the template, this has to be entered in the ExcelTemplate tag
  • TemplatePath: the absolute path of the template
  • TemplateTitle: short description of the template (currently not in use)
  • Description: detailed description of the template

If we want to define validations (/ data verifications / domains) on the template, the template must include a “__LookupList__” sheet (can be hidden) in which we specify the names of the individual groups under which the system automatically loads the appropriate item.

CREATE TABLE [dbo].[ExcelTemplateLookupValues](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [TemplateID] [int] NULL,
    [LookupGroup] [varchar](200) NULL,
    [Query] [varchar](max) NULL,
    [Deleted] [tinyint] NULL
) ON [PRIMARY]

Fields:

  • TemplateID: The unique identifier of the template file set in the ExcelTemplate table.
  • LookupGroup: The name of the group defined in the template (the system will look for groups by this name in the “__LookupList__” sheet of the template in a case sensitive manner).
  • Query: the result of the query set here will comprise the list of items belonging to the given group

Remarks:

  • If a different datasource is set during configuration, the domain to be exported cannot be selected in the window popping up when the export button is pressed. In such cases the system always exports the complete query result set.
  • The individual sheets will receive the name set in the Caption tag of the DisplayDefinition. If this tag is not set, they adopt the name of the DisplayDefinition XML file without extension as a name.
  • If a template is defined during configuration, the format to be exported cannot be set in the window popping up when the export button is pressed. In such cases the system always exports in xlsx format. The name of the template will appear in the pop-up window where we want to export to.
  • If we specify only the DataSource, all DisplayDefinitions specified on the DataSource tag will be exported to the 1-1 sheet of the excel in the order of listing.
  • If we specify only the ExcelTemplate tag, the content of the current DisplayDefinition will be exported to the specified template.
  • If both tags are set, the DisplayDefinition specified in the DataSourceswill be loaded into the excel template in the order of listing.
  • If we specify more DataSource than the number of sheets in the template, the system will issue a warning.
  • If none of the above is set, we can export data in the traditional way.

Custom DLL for export

There is a way to use custom programme code to export data in custom format instead of the built-in method when click on Export button.

<Control>
    <Name>exportModule</Name> 
    <Type>ActionButton</Type> 
    <Caption>Excel export (JSON)</Caption> 
    <OnButtonClick>
        <ActionType>Export</ActionType> 
        <Module className="Namespace.Class">[##LocalProgramPath##]\Namespace.dll</Module> 
    </OnButtonClick>
</Control>

Class Class has to implement interface IExportModule.

public class Class : IExportModule
{
    #region IExportModule Members

    public string Export(FNetOnline2.Domain.ConfigObjects.IExportButton exportButton, FNetOnline2.ServiceObjects.IGridParameters gridParameters, string fileName, string filePath, string licenseFileName)
    {
        DataProvider dataProvider = new DataProvider();

        DataGrid grid;
        DataDefinition ddo;
        string businessObjectIDColumn;
        string caption;

        Tools.GetRelatedConfigObjects(gridParameters.DisplayName, out grid, out ddo);
        Tools.GetGridInfo(grid, out businessObjectIDColumn, out caption);

        Dictionary<string, object> resultTable = FNetOnline2.ExcelExport.Tools.GetResultTable(dataProvider, ddo.Name, FNetOnline2.Domain.ConfigObjects.DisplayTypes.dgvc, gridParameters.DisplayName, gridParameters.InFilterValues, gridParameters.PSearchValues, gridParameters.Sort, gridParameters.RowCount);
        DataTable rawData = FNetOnline2.ExcelExport.Tools.ConvertResultTableToDataTable(resultTable);

        ExportType exportType = gridParameters.ExportType;

        DataTable exportTable = Tools.CreateExportTable(gridParameters.VisibleColumns);

        //only selected or simple filter
        DataRow[] results = null;
        if (exportType == ExportType.OnlySelected && !string.IsNullOrEmpty(businessObjectIDColumn))
        {
            results = Tools.GetSelectedRows(rawData, gridParameters.SelectedIDs, businessObjectIDColumn);
        }
        else
        {
            results = Tools.ApplySimpleFilter(rawData, gridParameters.SimpleFilters, gridParameters.Sort);
        }

        foreach (DataRow r in results)
        {
            DataRow row = Tools.CopyRow(gridParameters.VisibleColumns, exportTable, r);
            exportTable.Rows.Add(row);
        }

        Tools.RemoveRowIndexColumn(exportTable);

        string json = Newtonsoft.Json.JsonConvert.SerializeObject(exportTable);

        string outputFileName = Path.Combine(filePath, string.Format("{0}.json", fileName));

        File.WriteAllText(outputFileName, json);

        object reference = dataProvider.CreateFileInterfaceReference(outputFileName, DateTime.Now.AddMinutes(15));

        return reference == null ? string.Empty : reference.ToString();
    }

    #endregion
}

ProcessResultSet (PRS)

With this type of button batch processes can be executed on the data displayed in the table. For further information on the ProcessResultSet function please see: Extra functions.

Example:

<Control>
    <Name>prs1</Name>
    <Type>ActionButton</Type>
    <Caption>Final</Caption>
    <OnButtonClick>
        <OnlySelectedRows>true</OnlySelectedRows>
        <ActionType>ProcessResultSet</ActionType>
        <StoredProcedure>osp_prs_FinalizeOrder</StoredProcedure>
    </OnButtonClick>
</Control>
  • StoredProcedure: Name of the stored procedure to be called.
  • CloseScreenAfterAction: It triggers the closing of the screen once the action is complete. Its value may be True or False.
    • RefreshAfterAction: Its value can be Screen, Component or None. Here we can set the section of the screen to be refreshed after calling upon the PRS.
  • OnlySelectedRows: This button determines whether the selected rows or all rows of the table be passed to the PRS functions. Its value may be True or False.

GenerateDocument

With this type of button documents can be generated for the data displayed in the table. Document generation works essentially the same way as PRS, except here the system automatically generated a document based on the result of the stored procedure. In this case, the task of the stored procedure is to obtain the data needed for document generation and configure its functions.

Example:

<Control>
    <Name>docgen</Name>
    <Type>ActionButton</Type>
    <Caption>Generating contract</Caption>
    <OnButtonClick>
        <OnlySelectedRows>true</OnlySelectedRows>
        <ActionType>GenerateDocument</ActionType>
        <StoredProcedure>osp_prs_GenerateSzerzodesDoc</StoredProcedure>
    </OnButtonClick>
</Control>
  • StoredProcedure: : Name of the stored procedure to be called.
  • CloseScreenAfterAction: It triggers the closing of the screen once the action is complete. Its value may be True or False.
  • RefreshAfterAction: Its value can be Screen, Component or None. Here we can set the section of the screen to be refreshed after calling upon the PRS.
  • OnlySelectedRows: This button determines whether the selected rows or all rows of the table be passed to the PRS functions. Its value may be True or False.

ActionButtonChain

Several functions can be stringed to a single button, which means that we can have the same result at the push of one button as though multiple buttons were pressed consecutively on the interface. The names of the buttons to be called successively  have to be listed in the ChainItems node. Their order is determined by the ID attribute.

Example:

<Control>
    <Name>Chain1</Name>
    <Type>ActionButton</Type>
    <Caption>ActionButtonChain</Caption>
    <OnButtonClick>
        <ActionType>ActionButtonChain</ActionType>
        <ChainItems>
            <Item id="1">prs1</Item>
            <Item id="2">DLL</Item>
        </ChainItems>
    </OnButtonClick>
</Control>

TextSearch

It facilitates the definition of a simple free text filter.

The following nodes are optional and TextSearch specific:

  • The UseNumericRestriction setting regulates that only numbers can be entered in the filter field. Its value may be: byte, int16, int32, int64 or double. The default value is: int32 (when this setting has a value, but it is neither of the above listed ones).
  • With the MaxLength setting, we can specify the maximum length of the text entered in the filter field.

Example:

<Control>
    <Name>TaskIDTextBox</Name>
    <Type>TextSearch</Type>
    <Caption>Task #</Caption>
    <ConnectedColumnDefinition>f. Task ID</ConnectedColumnDefinition>
    <Operator>=</Operator>
    <UseNumericRestriction>int16</UseNumericRestriction>
</Control>

DateRange

The date range filter is essentially a special ComboSearch. Its operation is very similar to that of the latter.

Here too the ComboDefinition node is used to define the datasource of the selectable values, just like in case of the ComboSearch. This node contains the ComboDefinition reference, which is the name of the definition file.

Restrictions:

  • The key of the set of values must be of FROM|TO format. For example: (2011-01-01|2011-02-01).
  • In case of DateRange, the ConnectedColumnDefinition node must contain the {0} and {1} character string. The system will replace the first one with the FROM value, while the second one with the TO value.
  • Operator: The Operator node must have the BETWEEN value.

Example:

<Control>
    <Name>Interval</Name>
    <Type>DateRange</Type>
    <Caption>DateRange</Caption>
    <Width>230</Width>
    <ConnectedColumnDefinition><![CDATA[((case when e.done=0 and e.task=1 then dateadd(year,100,getdate()) else e.StartDate end) >= `{0}` and e.StartDate <= `{1} 23:59:59.999`)]]></ConnectedColumnDefinition>
    <Operator>between</Operator>
    <DefaultValue type="SQL" return="string" default="">
        <![CDATA[SELECT dbo.[Oriana_Short_Date](DATEADataDefinition(wk, DATEDIFF(wk,0,GETDATE()), 0)) + `|` +  dbo.[Oriana_Short_Date](DATEADataDefinition(wk, DATEDIFF(wk,0,GETDATE()), 6))]]>
    </DefaultValue>
    <ComboDefinition>ComboDateRange</ComboDefinition>
</Control>

TagCloud

This is a TagCloud type of filter. Tags are displayed in groups in a drop-down menu.

Example:

<Control>
    <Name>tagCloud1</Name>
    <Type>TagCloud</Type>
    <Caption>TagCloud</Caption>
    <Width>430</Width>
    <TagGroupColumn>tagGroup</TagGroupColumn>
    <TagCaptionColumn>tag</TagCaptionColumn>
    <TagValueColumn>count</TagValueColumn>
    <TagIDColumn>tagValue</TagIDColumn>
    <TagSearchControlDefinitionColumn>psearchDef</TagSearchControlDefinitionColumn>
    <DisplayGroupInControl>false</DisplayGroupInControl>
    <DataDefinition>DataDefinitionTagCloudProba</DataDefinition>
</Control>

The following nodes are available for the configuration of the tag cloud:

  • DataDefinition: It is used for the definition of the datasource, it contains the name of the DataDefinition which provides the data of the tag cloud. It is important that this DataDefinition must be able to receive the filters defined on the DisplayDefinition.
  • TagGroupColumn: It is the column of the DataDefinition which contains the name of the group.
  • TagCaptionColumn: It is the column of the DataDefinition which contains the tag captions.
  • TagValueColumn: It is the column of the DataDefinition which contains the value of the counter displayed next to the tag.
  • TagIDColumn: It is the column of the DataDefinition which contains the (group specific) unique ID of the tag.
  • TagSearchControlDefinitionColumn: It is the column of the DataDefinition which defines a ControlPanel Control element for filtering.
  • DisplayGroupInControl: Its value may be True or False, its default value is True. If its value is False, the control will not show the groups from which the active tags are selected.

QuerySearch

By selecting from a list of values, we can filter the values of the field defined in the ConnectedColumnDefinition. Its filtering mechanism is identical to that of the ComboSearch, however, here the list of values features a multi-column list.

Nodes available for the configuration:

  • Screen: It is the name of the screen that opens up when the value selection button is pressed.
  • DataDefinition: It is the name of the DataDefinition connected as a datasource, which contains the data consistent with the connected field. Its primary role is to retrieve the value to be displayed for the saved value (ID). (That is, the ID is stored in the CompanyID field, however, this DataDefinition is used to display the interface the company's name value selection button.)
  • KeyColumnDefinition: The name of the column containing the value.
  • ValueColumn: The name of the column continuing the string belonging to the value.

Example:

<Control>
    <Name>MarcomListQuerySearch</Name>
    <Type>QuerySearch</Type>
    <Caption>Lists</Caption>
    <ConnectedColumnDefinition>pe.peopleid</ConnectedColumnDefinition>
    <Screen>ScreenChoiseEventList</Screen>
    <DataDefinition>DataDefinitionChoiseEventList</DataDefinition>
    <KeyColumnDefinition>U_PRS_ID</KeyColumnDefinition>
    <ValueColumn>DisplayValue</ValueColumn>
    <Operator>in</Operator>
    <Query>
        (SELECT p.peopleid
        FROM orn_PeopleList m with (nolock)
        LEFT OUTER JOIN people p with (nolock) ON m.PeopleID = p.peopleid and p.deleted = 0
        WHERE m.Deleted=0 AND m.ProcessResultSetID = #param#)
    </Query>
</Control>

BoolSearch

This contains the definition of a simple checkbox-type filter containing a single node, which defines whether the filter is a 2- or a 3-state checkbox. This setting can be done with the following node: <IsIndeterminateAllowed>true</IsIndeterminateAllowed>

<Control>
    <Name>IsArchivedCheckBox</Name>
    <Type>BoolSearch</Type>
    <Caption>Archived?</Caption>
    <ConnectedColumnDefinition>f.IsArchive</ConnectedColumnDefinition>
    <IsIndeterminateAllowed>true</IsIndeterminateAllowed>
    <Operator>=</Operator>
    <DefaultValue type="Constant" return="boolean" default="false">False</DefaultValue>
</Control>

Configuring linked objects

With the help of linked objects, we can generate links in grid views with which we can navigate to predefined screens. Its importance lies in the fact that the grid contains only certain data about the given object - such as its ID or description -, whereas the opened screen can display any kind of information concerning the object. For its operation, it uses filters. When clicking on the grid, the ID of the selected object (in case of valid configuration) is added to the outgoing filters; then the screen to be displayed builds itself up using this value, and finally loads the data. To define Linked objects, we have to use the Link elements of the DisplayDefinition/Links collection where we can list the link definitions.

Example:

<Links>
    <Link>
        <ColumnName>ProjectName</ColumnName>
        <Screen>ScreenProject</Screen>
        <ReferencedMinorMenu>MMFolyamatok</ReferencedMinorMenu>
    </Link>
</Links>

The only optional node of the Link node is the Type. Its default operation (when the type node is not configured) is as described above. It opens the referenced object. When configured, it can assume any of the following values, which then modifies the default operation:

  • New: The pop-up window will be displayed in new data entry mode (not as edit form).
  • Exists: The pop-up window will be displayed as an edit form. This is the default setting.
  • NewOrExists: The framework checks whether the referenced object exists. If it exists, its data will be displayed, otherwise a new one will be generated.
  • In case of ProcessResultSet, when clicking on the link, a new PRS call is made. The PRS call will be done by the ControlPanel Control attached to the Link. This connection can be set up by configuring the ProcessResultSetControl node of the given Link node. Its value must be the ID of a ControlPanel Control that implements a PRS.
  • OpenUrl: It opens a URL.

Examples:

<Links>

    <Link>
        <Type>NewOrExists</Type>
        <ColumnName>ProjectName</ColumnName>
        <ReferencedMinorMenu>MMFolyamatok</ReferencedMinorMenu>
        <Screen>ScreenProject</Screen>
    </Link>

    <Link>
        <Type>ProcessResultSet</Type>
        <ColumnName>ProjectName</ColumnName>
        <ProcessResultSetControl>ActionButton_DocGen</ProcessResultSetControl>
    </Link>
</Links>

The nodes available for defining a link are as follows:

  • ColumnName: It contains the ID of the column (DisplayDefinition/Columns/Column name attribute of the XML) where the link appears.
  • ReferencedMinorMenu: With this we can define the MinorMenu where the new screen will be displayed.
  • Screen: The new screen within the given MinorMenu can be set in this node using the known screen reference. (It does not have to be specified in the MinorMenu configured in the ReferencedMinorMenu node.)
  • FilterInUrl: It is applicable for the OpenUrl type only.
  • ProcessResultSetControl: It is applicable for the ProcessResultSet type only.
  • Using the Target attribute, it can be configured that the pop-up screens will open in a new browser tab, rather than in the current one.

Examples:

<Links>
    <Link>
        <ColumnName>CompanyName</ColumnName>
        <ReferencedMinorMenu>MMProcesses</ReferencedMinorMenu>
        <Screen>ScreenCompanyEdit</Screen>
    </Link>
    <Link>
        <ColumnName>ProjectName</ColumnName>
        <ReferencedMinorMenu>MMProcesses</ReferencedMinorMenu>
        <Screen>ScreenProject</Screen>
    </Link>
    <Link>
        <Type>New</Type>
        <ColumnName>Notes</ColumnName>
        <ReferencedMinorMenu>MMPEP</ReferencedMinorMenu>
        <Screen>ScreenCommentsProject</Screen>
    </ChainListNode>
</Links>

Configuring subtypes and type specific functions

As it has been mentioned at the beginning of the chapter, tabular displays have many subtypes, the configuration of which can be done using a few special nodes and attributes. Mainly the formatting is affected by these settings, the source of the data remains unchanged.

Table

It has been discussed in an earlier section of the document.

TransposedTable

It displays a transposed grid, which means that anything that was a column before, now becomes a row. The column tags are shown in the first column. The settings of the TransposedTable view can be configured under the TransposedTableViewOptions node.

Available settings:

  • The ColumnCaptions node clusters the parameters of the dynamic column header collecting function. In case of dynamic grids, the column header is, by default, the value returned by the query defined in the DataDefinition node. Replacing these headers with the result of a different query or a fixed value is an option. The source can be defined in the sourceType attribute. The value of this attribute may be Database or XML. The default value is Database. If the value of the sourceType is Database, the system uses the configurations clustered under the Database node, while in the other case, it processes the settings under the FixedValues node.

Example for Database:

SELECT Name, Caption FROM orn_ColumnCaptions WHERE DisplayDefinition = 'DisplayDefinitionDinamicReport'

Example for XML:

Available items (name) Available items (price) Remarks

Card, CardMatrix

From configuration point of view, there are only minor differences between the card-type views, therefore, we are discussing them in the same section.

What the Card view essentially does is create a card for each row returned as the result of a query and place them side by side on the interface. That is, 1 row = 1 card.

If the user selects the chart view based on a column, the cards will be displayed below one another, and their size will change dynamically consistent with the value of the specified column. The greater the value, the more the card will stand out from the rest.

The column definitions include some setting options applicable for Card views only:

CardView with TemplateURL:

In this case, the value of the node must be the path of the external HTML template. It is important that a file with .html extension be defined because that is what triggers the system to switch to TemplateURL mode.

In the template, we can use any HTML tag as a ChainListNode if we generate a ChainListNode attribute, and in that node, we set the name of the column that is defined in the ClickedColumn node of the XLM file’s ChainListNode.

Here, the DataDefinition column can be referenced with the {{card.data.<column>}} signature .

NOTE: Simpler AngularJS directives can also be used in the template: (ng-if, ng-show, ng-hide)

Example:

dgvcSample.xml

<CardViewHTML>delivery/js/cards/project_card.html</CardViewHTML>

project_card.html

<div class="event" style="height:100%; background-color: #fff;border: 2px solid #ccd; padding: 4px 6px;">
    <a chainlistnode='Description'>{{card.data.Description}}</a>
</div>

Nodes applicable in Card view (DisplayDefinition/CardViewOptions):

  • IsSortingEnabled: It controls the visibility of the built-in "sorting" combobox. Its value can be True or False. Its default value is True. Optional setting.
  • IsGroupingEnabled: It controls the visibility of the built-in "gouping" combobox. Its value can be True or False. Its default value is True.
  • GroupCssClassList: Groups can feature diverse styles. These alternate styles can be set here. Its value is a list of CSS class names separated by commas. Optional attribute.
  • GroupBy: An optional setting, its value is the name of a column defined in the DataDefinition, based on which the cards will be grouped by default. With the Direction attribute we can set the default sorting order for the grouping; the names of the groups will be displayed in the order specified here. It is optional, its value may be Asc or Desc, It is Asc by default.
  • GroupLayout: It is an optional setting; its value may be Horizontal or Vertical. It is responsible for the horizontal or vertical display of the groups. The layout can be modified on the interface. If we want to disable this setting, it can be done with the help of the DisplayDefinition/ToolbarOptions/IsCardGroupLayoutChangeEnabled node. Its value can be True or False. Its default value is False.
  • GraphByColumns: It contains the names of the columns - separated by commas - to which the iGraph display mode is applicable. It is optional. Similar to the GroupByColumn and the SortByColumn drop-down lists, this setting provides the ability to define the way the system renders the cards (GraphByColumns attribute in the HTMLTemplate) beneath each other, each with a length defined by the selected value. This means that if, for example, we select from the graph combobox that the "project" cards be rendered according to the "expenses" item, the value of the “expenses” fields will be added to the default width of the cards to get the width of each given card. In addition, the values of the “expenses” field will be displayed next to each card on their right-hand side. In short, a rotated column-diagram will be the result.
  • Using the CssFloat node, we can override the float setting of the cards defined in the CSS.
  • CardClickControlName: It is the ID of the ControlPanel Control which makes the ProcessResultSet call when a card is clicked on. This ControlPanel Control is not necessarily visible.
  • With the help of the CardMatrixViewOptions/ColumnCount, CardMatrixViewOptions/WidthColumn and CardMatrixViewOptions/HeightColumn node, we can arrange the cards side-by-side in a matrix-like layout. The value of the ColumnCount node is a number indicating the number of “columns” contained by the matrix. The WidthColumn and HeightColumn nodes contain the names of the columns that define the dimensions of the given card. This way we have a chance to generate cards of different sizes. The size must be defined in pixels.
  • With the ShowGroupElementCount attribute, we can regulate the visibility of the group counter. This is a simple True/False toggle.
  • IsAnimationEnabled: The cards displayed on the interface are animated. In certain cases, it is worth turning this function off. Its value may be True or False. Its default value is True.
  • DragAndDropControlName: On the cards, certain actions can be done using drag&drop. This means that when a card is dropped on another card, Effector carries out the function assigned to the ActionButton configured in this setting. (It is a button defined on the ControlPanel, which, if possible, is an ActionType = ProcessResultSet or ActionType = GenerateDocument.)

Nodes applicable in CardMatrix view (DisplayDefinition/CardMatrixViewOptions):

  • ColumnCount: Here the number of cards displayed in a row can be defined. Its value must be a positive integer.
  • WidthColumn: This setting contains the name of the column that provides the widths of the card in pixels offering a chance to generate cards of various sizes.
  • HeightColumn: This setting contains the name of the column that provides the height off the card offering a chance to generate cards of various sizes.
  • IsAnimationEnabled: The cards displayed on the interface are animated. In certain cases, it is worth turning this function off. Its value may be True or False. Its default value is True.
  • DragAndDropControlName: On the cards, certain actions can be done using drag&drop. This means that when a card is dropped on another card, Effector carries out the function assigned to the ActionButton configured in this setting. (It is a button defined on the ControlPanel, which, if possible, is an ActionType = ProcessResultSet or ActionType = GenerateDocument.)
  • CardClickControlName: It is the ID of the ControlPanel Control which makes the ProcessResultSet call when a card is clicked on. This ControlPanel Control is not necessarily visible.

Tree

The configuration of the tree view is similar to the views discussed above. Here, too, the HTMLTemplate node contains the required HTML element.

The available nodes (within the TreeViewOptions node) are as follows:

  • IDColumn: It is the ID of the column defined in the DataDefinition that clearly identifies a node.
  • ParentIDColumn: This setting includes the ID of the DataDefinition column containing the ID of the parent of the given node.

Example:

<TreeViewOptions>
    <IDColumn>EventID</IDColumn>
    <ParentIDColumn>ParentEventID</ParentIDColumn>
</TreeViewOptions>

Calendar

The configuration of the calendar view is similar to the views discussed above. Here, too, the HTMLTemplate node contains the required HTML element.

The available nodes (within the CalendarViewOptions node) are as follows:

  • StartDateColumn: It is the ID of the DataDefinition column which contains the start date of the item to be displayed in the calendar.
  • EndDateColumn It is the ID of the DataDefinition column which contains the end date of the item to be displayed in the calendar.
  • NewObjectButtonName: It is the name of the button on the ControlPanel that is responsible for recoding new items.
  • DateRangeControlName: It is the name of the button on the ControlPanel that filters the data displayed in the calendar for date range (in the calendar, the interval pacer controls the value of this filter).
  • StartHour: Events starting only from this hour of the day are shown in the calendar. Its default value is 0.
  • EndHour: Only events starting before this hour of the day are shown in the calendar. Its default value is 24.

Example:

<CalendarViewOptions>
    <StartDateColumn>StartDate</StartDateColumn>
    <EndDateColumn>EndDate</EndDateColumn>
    <NewObjectButtonName>NewEvent</NewObjectButtonName>
    <StartHour>9</StartHour>
    <EndHour>17</EndHour>
</CalendarViewOptions>

SectionList

This view gets activated by the ViewType=SectionList node. In the HTMLTemplate node, the HTML template describing the display of the individual sections should be specified. The references get replaced just as in case of the other views.

Available attributes:

  • width: It regulates the width of the card, it is advised to leave the value on auto.
  • height: It regulates the height of the card, it is advised to leave the value on auto.

Example:

<HTMLTemplate width="auto" height="auto">
    <![CDATA[
        <div class="listview_item_content_01">
        <div style="margin:[##Margin##];text-align:[##Align##];font-size:12px;">
            <div>[##Hivatkozas_Tipus##] [##[##type##]_Name##] [##EditTitle##] [##EditMegallapitas##] [##EditMegallapitasForNew##] [##Edit_ProjectName##]</div>
        </div>
    ]]>
</HTMLTemplate>

HTMLTemplates

With the exception of the Table and TransposedTable views, The HTML definition serving as a basis have the cards can be set in the HTMLTemplate node under the HTMLTemplates node.

In the HTMLTemplate setting, we can define the appearance and content of a card. Its content can be a string containing HTML expressions or a URL. The URL must reference an HTML file containing HTML expressions. Effector replaces the [##Name##] type expressions with the values received from the database (in the aforementioned example, the values of the Name column are replaced).

  • Width: With this attribute, we can set the width of the card (in pixel).
  • Height: With this attribute, we can set the height of the card (in pixel).
  • isTemplateURL: With this attribute, we can set whether the value of the setting is a URL (True) or not (False`). (Example 2)
  • when: Alternate cards can be defined using this and the is setting. Its value is the name of a column whose value specifies which card template is used. In case of the default card template, the When attribute is not defined. (Example 3)
  • is: Alternate cards can be defined using this and the when setting. The value of the column set in the when attribute must be set here, which determines whether the given template is needed or not. (Example 3)

Example 1:

<HTMLTemplates>
    <HTMLTemplate><![CDATA[
        <div class="listview_item_content_01" style="background:url(core/gfx/images/card_organization_bg.png);overflow:hidden;height:100%">
        <div style="height:17px;font-size: 13px;top:2px;left: 55px;position:absolute;width: 237px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">[##Name##]</div>
            <div class="CmpBtn" style="position:absolute;top:0px;right:0px;font-size:25px;color:#fff;">[##EditLink##]</div>
            <div style="left: 55px;font-size:12px;width: 240px;height:35px;position:absolute;top: 51px;color:#555555;text-overflow:ellipsis;overflow:hidden;" title="[##Zip##] [##City##], [##Street##] [##StreetNumber##]."><span style="color:#D57D62;">Cím:</span> [##Zip##] [##City##], [##Street##] [##StreetNumber##].</div>
        </div>
    ]]></HTMLTemplate>
</HTMLTemplates>

Example 2:

<HTMLTemplates>
    <HTMLTemplate isTemplateURL="true">delivery/html/card.html</HTMLTemplate>
</HTMLTemplates>

Example 3:

<HTMLTemplates>
    <HTMLTemplate isTemplateURL="true" when="priority_level" is="high">delivery/html/high_prio_project.html</HTMLTemplate>
    <HTMLTemplate isTemplateURL="true" when="priority_level" is="low">delivery/html/low_prio_project.html</HTMLTemplate>
    <HTMLTemplate isTemplateURL="true">delivery/html/project.html</HTMLTemplate>
</HTMLTemplates>

  • Last update: 19 weeks 1 days ago
  • Effector