Top
Top
LibraryEASYProcess Reference ManualWebPartsFieldsSection
Field:Section

Appearance

Description, ShowHeader

When the field has a Description, the text here displays in that description. Blank and spaces are accepted values for this property.

Whether a not a field has a description is determined by the section the field is in. Each section has a property called “Field Description” which has options to either not display a description (Field Description: No) or where it should be displayed in relation to the field (Field Description: left, right, top).

Collapsed, Collapsible

Collapsible : Use this property to make a section collapsible. A collapsible section allows you to show/hide content of a section using a +/- image in the header. Use ‘Collapsed’ property to set state of a section when it loads for the first time. Default is Collapsed = False.

If a section is collapsible, you can set Collapsed True/False using javascript.

If a section is collapsible, its ShowHeader property will be automatically set to True.

ContainerDivStyle, DisplayInContainerDiv

When DisplayInContainerDiv is set to ‘True’ when the section is put on the page it will be wrapped in a html <div> tag. This allows for more stylization for the section as a whole. ContainerDivStyle is the field property in which any CSS will be placed which will then get attached to the <div>.

Enabled, RenderIfNotVisible, ShowIfLoggedIn, Visible

Basic Properties

InvokeOnLoad, InvokeOnPreRender

User of OnLoad and OnPreRender process is no longer recommended. You should use process data source.

InvokeOnLoad : Use this to invoke webpart OnLoad process before a webpart load.

InvokeOnPreRender : Use this to invoke webpart OnPreRender process before a webpart load.

Active

Content Style

ContentCellClass, ContentCellStyle, ContentDescriptionCellClass, ContentDescriptionCellStyle, ContentDescriptionRowClass, ContentDescriptionRowStyle, ContentRowClass, ContentRowStyle, ContentTableClass, ContentTableStyle

Basic sections have four areas that can be styled, see picture below. These areas are located inside a sections MainTableClass (see below). These Class and Style properties are associated with these areas. There are three ways you can specify values for these properties.

  • Use SkinId. A skin is a predefined collection of classes for a particular control. Once a SkinId is specified for a control, a set of classes in that control will be automatically set. For example, MainTableClass in section will be ‘Section-<SkinId>-ContentCellRow’. Every control defaults to SkinId = ‘Default’. You can have multiple skins for a particular control but only one can be applied at a time. Values for these classes are specified using EASYProcess CSS feature. To understand how CSS and Skin Id works review document here.
  • Use your own class names. It will override skin based class name if SkinId is specified. You should use this feature if for a particular webpart/section/control, you like most of the skin classes but you want your own header class. Make sure you define those class names using EASYProcess CSS feature or in your own CSS.
  • Use inline styling using ContentCellStyle, ContentDescriptionCellStyle, etc. Any value specified in these styles will be applied directly. You can use EASYProcess style builder to create style string.
  • To style other elements in webpart, which are children of these areas, use CSS selectors for children.

To understand where these styles and classes apply, see picture below.


Fields

FieldCellWidth, FieldDescriptionCellWidth, FieldDescriptionHorizontalAlign, FieldDescriptionPosition, FieldDescriptionVerticalAlign, FieldHorizontalAlign, FieldVerticalAlign

All these properties are used to control fields in a section.

FieldDescriptionPosition : Use this property to control a field description. When you add a field in a section, by default its description will show. Using this property, you can set its position. If you do not want to show description, set it to None.

Other properties are self explanatory in what they do.


Grid Style

GridAlternateRowCellClass, GridAlternateRowCellStyle, GridAlternateRowClass, GridAlternateRowFirstCellClass, GridAlternateRowFirstCellStyle, GridAlternateRowLastCellClass, GridAlternateRowLastCellStyle, GridAlternateRowStyle, GridHeaderRowCellClass, GridHeaderRowCellStyle, GridHeaderRowClass, GridHeaderRowFirstCellClass, GridHeaderRowFirstCellStyle, GridHeaderRowLastCellClass, GridHeaderRowLastCellStyle, GridHeaderRowStyle, GridLevelBreakClass, GridLevelBreakStyle, GridRowCellClass, GridRowCellStyle, GridRowClass, GridRowFirstCellClass, GridRowFirstCellStyle, GridRowLastCellClass, GridRowLastCellStyle, GridRowStyle

When a section has the property GridMode = ‘True’ the section has eleven areas that can be styled, see picture below. These areas are located inside a sections MainTableClass (see below). These Class and Style properties are associated with these areas. There are three ways you can specify values for these properties.

  • Use SkinId. A skin is a predefined collection of classes for a particular control. Once a SkinId is specified for a control, a set of classes in that control will be automatically set. For example, MainTableClass in section will be ‘Section-<SkinId>-GridHeaderRow’. Every control defaults to SkinId = ‘Default’. You can have multiple skins for a particular control but only one can be applied at a time. Values for these classes are specified using EASYProcess CSS feature. To understand how CSS and Skin Id works review document here.
  • Use your own class names. It will override skin based class name if SkinId is specified. You should use this feature if for a particular webpart/section/control, you like most of the skin classes but you want your own header class. Make sure you define those class names using EASYProcess CSS feature or in your own CSS.
  • Use inline styling using GridHeaderRowStyle, GridHeaderRowLastCellStyle, etc. Any value specified in these styles will be applied directly. You can use EASYProcess style builder to create style string.
  • To style other elements in webpart, which are children of these areas, use CSS selectors for children.

                

To understand where these styles and classes apply, see picture below.


Layout

HorizontalAlign, VerticalAlign

The horizontal alignment of the field description is controlled by DescriptionHorizaontalAlign and can be set to left, center, or right

The vertical alignment of the field description is controlled by DescriptionVerticalAlign and can be set to top, middle, bottom, or baseline

The horizontal alignment of the field is controlled by HorizontalAlign and can be set to left, center, or right

The vertical alignment of the field is controlled by VerticalAlign and can be set to top, middle, bottom, or baseline

The height of the field description is controlled by FieldDescriptionHeight

The width of the field description is controlled by FieldDescriptionWidth

The height of the field is controlled by Height

Control the tab order by setting the Tabindex of each field.

The width of the field is controlled by Width

CellPadding, CellSpacing, Height, Width
NoOfColumns

Use NoOfColumns to lay out sections in webpart.

Following picture demonstrate a webpart with four sections. Number in box repersent NoOfColumns. NoOfColumns = 0 means all section will be laid out in one row no matter how many.


List Mode

AutoAddFields

If AutoAddFields is set to ‘True’ when the page loads fields will be auto generated to match the nodes that are in the DataSourceNode.

DataDownload

DataDownload defaults to None. It can also be set to CSV which will add a button above the list sections which when clicked will create a CSV file of the data in the list.

To choose which fields are downloaded or not see the DownloadMode property for each field in the list.

DataSourceNode, ListDataSource

ListDataSource is the datasource that will be the source of the data for the list section. It must be a datasource that is in the webpart.

DataSourceNode is the node inside of the ListDataSource that will be the exact source of the data for the list. This is the node that the list will iterate over.

DisableAutoConnect, GridLayout, GridMode, ListMode

DisableAutoConnect should be left blank or False in most cases, since EASYProcess connect a list section to a single node for better paging control. For example, if you select WorkData/Inquire as your DataSourceNode and set ListPerPage to 10, the Inquire database service will only generate 10 results at a time. However, if there is another Evaluate service that has the same name, and you need to display both in your list section, you will need to set DisableAutoConnect to True. Only 10 results will be shown at a time but all possible results will be loaded when the page loads.

GridMode is True will set all fields in the section into one row and move the field description to the top no matter what you have set in FieldDescriptionPosition and NoOfColumns. It is usually set to True when ListMode is True, which means it is a list section. ListMode is True will make it a list section and display results from your datasource. The other properties under List Mode will not take affect unless ListMode is True.

DisplayPaging, ListPerPage, ListPerRow, PagingFormat

DisplayPaging is defaulted to ‘None’. It can also be set to ‘Bottom’ which will put page controls under the list section.

PagingFormat is how the the current page and total results will be show. This will be be put right next to the controls and only be shown if DisplayPaging is set to ‘True’.

ListPerPage is a numerical value for how many results will be shown at a time.

ListPerRow is a numerical value for how many results will be show in each row. The default is 1. This can only be used if GridMode is set to ‘False’.

RowSelection, SelectAll, ShowSelectAll

RowSelection is defaulted to ‘None’ if GridMode is set to ‘True’ it can also be set to ‘Single’ or ‘Multiple’. ‘Single’ will add a radio button to each row to allow a single row to be selected. ‘Multiple’ will add a checkbox to each row to allow multiple to be selected. The field is named [SectionId]_Selected.

If RowSelection is set to ‘Multiple’ SelectAll can be used. It is defaulted to ‘False’. If set to ‘True’ all rows will be selected when the pages loads.

ShowSelectAll is defaulted to ‘False’. When set to ‘True’ and RowSelection set to ‘Multiple’  it will add a checkbox to the header row and when that box is selected/unselected all rows will be selected/unselected.

SortField, SortOrder

SortField is the field in the list section that will be sorted on. It is defaulted to not have a sort field and will display the data in the order of the DataSourceNode. If selecting a field the the field must have its property AllowSorting = ‘True’ SortOrder can be set to ‘ASC’ for ascending or ‘DESC’ for descending. This will change the order in which the SortField is sorted. If the section is tied to a RunQuery service sorting will not work automatically. You will need to use the GetSectionProperties service to get the SortField and SortOrder values and add ORDER BY <xsl:value-of select=”WorkData/GetSectionProperties/SortField”/> <xsl:value-of select=”WorkData/GetSectionProperties/SortOrder”/> to your query.


Navigation

NavigationUrl
Target
WrapInHyperlink

Responsive Design

RWDAutoFormat, RWDVisibility

These two properties are used for adaptive design for phone display.

RWDAutoFormat : By default EASYProcess will does auto format for a control for adaptive design. For example, section NoOfColumns will always be set to 1 for phone display. By making RWDAutoFormat to false, you can stop such format from happening automatically. This property is only available at WebPart and Section level.
RWDVisibility : Its value can be All, Desktop, Phone. ‘All’ means this control will display in both desktop browser and phone. Desktop will force this control to display in desktop browser, Phone will force this control to display in phone browser. If value is blank, then it will default to ‘All’.


Section Style

ControlPanelTableClass, ControlPanelTableStyle, HeaderTableClass, HeaderTableStyle, MainTableClass, MainTableStyle, SkinId

A section has three areas that can be styled, MainTable, HeaderTable and ControlPanelTable, see picture below. These Class and Style properties are associated with these areas. There are three ways you can specify values for these properties.

  • Use SkinId. A skin is a predefined collection of classes for a particular control. Once a SkinId is specified for a control, a set of classes in that control will be automatically set. For example, MainTableClass in section will be ‘Section-<SkinId>-MainTable’. Every control defaults to SkinId = ‘Default’. You can have multiple skins for a particular control but only one can be applied at a time. Values for these classes are specified using EASYProcess CSS feature. To understand how CSS and Skin Id works review document here.
  • Use your own class names. It will override skin based class name if SkinId is specified. You should use this feature if for a particular webpart/section/control, you like most of the skin classes but you want your own header class. Make sure you define those class names using EASYProcess CSS feature or in your own CSS.
  • Use inline styling using MainTableStyle, HeaderTableStyle etc. Any value specified in these styles will be applied directly. You can use EASYProcess style builder to create style string.
  • To style other elements in webpart, which are children of these areas, use CSS selectors for children.

To understand where these styles and classes apply, see picture below.


Tab Mode

SelectedTab, TabContainer, TabContainerBottomPadding, TabContainerLeftPadding, TabContainerWidth, TabPadding, TabWidth

For a section to be a tab section the TabContainer property must be set to ‘True’. This will allow for a tab to contain multiple child sections and only display one at a time. If TabContainer is set to true the section will get the Tab Styles classes (see below).

The SelectedTab is the SectionId of a child section of the tab section. This is the section that will be selected when the page first loads.

The TabContainerBottomPadding property is a numeric value and will specify the height of the TabFooterClass which can be used for spacing between the tab selection and the tab content.

TabContainerLeftPadding is a numeric value which will set the width of the space between the left edge of the section and the first TabCell.

TabContainerWidth is a numeric value which will specify the width of the TabTable.

TabPadding is a numeric value that will specify the width of the space between TabCells.

TabWidth is a numeric value to specify the width of each TabCell


Tab Styles

TabCellClass, TabCellStyle, TabFooterClass, TabFooterStyle, TabRowClass, TabRowStyle, TabSelectedCellClass, TabSelectedCellStyle, TabTableClass, TabTableStyle, TabTextClass, TabTextStyle

If a section has its property TabContainer = ‘True’   it then has six areas that can be styled, see picture below. These areas are placed in the sections MainTableClass (see above). These Class and Style properties are associated with these areas. There are three ways you can specify values for these properties.

  • Use SkinId. A skin is a predefined collection of classes for a particular control. Once a SkinId is specified for a control, a set of classes in that control will be automatically set. For example, MainTableClass in section will be ‘Section-<SkinId>-TabRow’. Every control defaults to SkinId = ‘Default’. You can have multiple skins for a particular control but only one can be applied at a time. Values for these classes are specified using EASYProcess CSS feature. To understand how CSS and Skin Id works review document here.
  • Use your own class names. It will override skin based class name if SkinId is specified. You should use this feature if for a particular webpart/section/control, you like most of the skin classes but you want your own header class. Make sure you define those class names using EASYProcess CSS feature or in your own CSS.
  • Use inline styling using TabRowStyle, TabCellStyle, etc. Any value specified in these styles will be applied directly. You can use EASYProcess style builder to create style string.
  • To style other elements in webpart, which are children of these areas, use CSS selectors for children.

To understand where these styles and classes apply, see picture below.

Powered by EASYProcess (© 2019 K-Rise Systems, Inc).