Using K2BWebPanelDesigner HTML Editor Layout Object

Objective

There are cases in which developers want to change the disposition of elements inside web panels generated by K2BWebPanelDesigner. For this purpose K2BWebPanelDesigner has a default layout that can be modified by the user. This change applies to all web panels generated using K2BWebPanelDesigner. This page shows how to modify the Layout Object used in the generation of Web Forms when the Responsive generator is used.

How it works

In K2BWebPanelDesignerSettings there is a property named LayoutObject. Its default value is "WebPanelDesignerLayout". You can edit the "WebPanelDesignerLayout" object or create a new web panel and set it as LayoutObject.

The images below show how web panels designed using K2BWebPanelDesigner object are generated.

WebPanelDesignerLayoutObject WebPanelDesignerLayoutObjectRT
WebPanelDesignerLayoutObject WebPanelDesigner Object in RunTime

Customizing Layout Object

In order to customize the layout object, you must know that webpaneldesigner will replace divs, not images. For illustratring purposes the divs have images that indicate what node each div represents.

We give you here the divs id's that must be included in K2BWebPanelDesignerLayout.

  • K2BSection_TitleContainer: It will be replaced by web form Title.
  • K2BSection_ErrorViewerContainer: If in WebForm node the property "need error viewer" is set to true, it will be replaced by an error viewer. 
  • K2BSection_ConditionalConfirm: If web panel designer has an action with conditional confirm, the confirm dialog will be placed there.
  • K2BSectionFiltersContainer: Filters will be placed there.
  • K2BSectionGridContainer: The grid will be placed there.
  • K2BSectionOrderedByContainer: Order by will be placed there
  • K2BSectionPagingLeftContainer: Buttons previous and first page will be placed there
  • K2BSectionPagingPageCountContainer: Current Pages and Page Count literals will be placed there
  • K2BSectionPagingRightContainer: Button page next and page last will be placed there
  • K2BSection_GridSummary:  Summarized information will be placed there.
  • K2BSection_GridActions: Bellow Grid Actions will be placed there.

In order to make use of copy & pase options of divs we recommend to use the document outliner tool. It allows to have a tree view of the layout web panel and to drag & drop divs.

It is important to note that all divs corresponding to a grid must be placed inside the "K2BSection_AllGridContainer". The divs that must be placed this way are: K2BSectionFiltersContainer, K2BSectionHiddenFiltersContainer, K2BSectionGridContainer, K2BSectionOrderedByContainer, K2BSectionPagingLeftContainer, K2BSectionPagingPageCountContainer, K2BSectionPagingRightContainer, K2BSection_GridSummary, and K2BSection_GridActions.

Below an example of a modified layout object is shown.

WebPanelDesignerLayoutObjectChanged WebPanelDesignerChangedLayoutObjectRT
Changed Layout Object WebPanelDesigner Object with changed layout at  RunTime

Note: Some web panels may contain many grids. In this scenario, the div K2BSection_AllGridContainer will be replicated as many times as necessary to include all the grids defined. Bear this in mind when performing the modifications.


.