Customizing sidebar zones
You can customize portal sidebar zones to suit your specific business needs.
Sidebar zones are sliding workspaces situated on the left or right side of a NexJ application. They contain one or more portlets. A single portlet can be shown or hidden at any time. Portlets contained in sidebars can interact with the active workspace by passing and receiving context variables. By default, sidebar zones contain the Conversations portlet.
Customize the sidebar's metadata to redefine its functionality. Use NexJ Studio to change the following sidebar zone properties:
- The portlets that are contained in the sidebar zone.
- The width of the sidebar zone area.
- The sidebar zone's layout mode.
- The icons that will be used as the buttons to toggle sidebar zone visibility.
Sidebar zones
Sidebar zones are unique NexJ CRM workspace containers.
Each sidebar zone contains one or more portlets that are active for the lifespan of the application. Sidebar zones are similar to broker portlets as they are always able to receive context variable updates from the active workspace. Although not always visible, portlets in the sidebar zone are constantly aware of user interactions in the main area of the NexJ application.
Sidebar zone visibility is controlled by two methods:
- Users clicking a control element.
- An API call.
When either method is invoked, the sidebar zone will slide out or retract. How sidebar visibility affects the NexJ CRM layout is determined by its layoutBehavior property.
Sidebar zone buttons are always visible in NexJ CRM. Clicking a sidebar button toggles the visibility of the sidebar zone. The sysShowPortlet UI Event is fired whenever the sidebar is opened.
Sidebar zones exchange context variables with the active workspace. When switching workspaces, sidebar zones unregister listeners from the previous workspace and begin listening to changes in the newly selected workspace. If context variables registered in the sidebar zone exist in the new workspace, an explicit SysContext event will be fired to the sidebar portlet to ensure it can refresh itself and prevent data loss.
Sidebar zones support event broadcasts. NexJ framework will shelve UI Events to the sidebar portlets if the sidebar zone is closed. It will then fire any shelved events when the sidebar is made visible again. This is the same behavior as portlets within workspaces when their visibility changes.
Sidebar zone layout modes
Sidebar zone layout modes control how the sidebar zone will affect the appearance of NexJ CRM. The layout mode of a sidebar zone is defined by editing its metadata properties.
There are two layout modes:
OVERLAY (always overlay)
Places the sidebar on top of the main NexJ CRM area when visible. Does not change the positioning or size of any active workspaces or toolbars. The sidebar zone appears on top of existing content.
BUMP (bump then overlay)
Changes the layout of NexJ CRM when visible. Existing content snaps to the edge of the sidebar and resizes itself to fit in the remaining space. There is no overlapping or missing content when the sidebar zone is visible.
Related links
Sidebar zone properties and attributes
Sidebar zones are configured using the SysUpgrade.meta
file in your working model.
Modify the sideBarPortletsList property in the WORKSPACE_APPLICATIONS
attribute to define how the sidebar zone will function in your NexJ application. A sidebar zone can contain multiple portlets. Only one portlet can be shown or hidden at a time.
The sideBarPortletsList property contains the following attributes:
sideBarPortletsList properties
Attribute | Value | Description |
---|---|---|
name | string | A unique name for the sidebar zone portlet that will be used across the application. |
referent | string | The name of the portlet that will be used in the sidebar zone. |
layoutBehavior | BUMP or OVERLAY | How the sidebar zone will affect the layout of NexJ CRM when it is visible. For more information on sidebar zone layout modes, see Sidebar zone layout modes. |
side | LEFT or RIGHT | Which side of the screen the sidebar zone will be situated. |
size | decimal | The width of the sidebar zone in pixels (px). |
The following is an example SysUpgrade.meta file which defines two sidebar zones:
(message
(: application "Contact")
…
(: sideBarPortletsList
(list
(message
(: name "leftScreenPortlet")
(: referent "EntityDashboardPortlet")
(: layoutBehavior (SideBarLayoutEnum'get 'OVERLAY))
(: side (SideBarSideEnum'get 'LEFT))
(: size "300px"))
(message
(: name "rightScreenPortlet")
(: referent "ConversationInboxPortlet")
(: layoutBehavior (SideBarLayoutEnum'get 'BUMP))
(: side (SideBarSideEnum'get 'RIGHT))
(: size "300px"))
)
)
)
These attribute values are parsed during the seed event defined in the SEED_WORKSPACE.meta
file.
In the SysApplication
class, the sideBarPortlets
attribute becomes a collection of a type SideBarPortletRef. If SysApplication has existing SideBarPortletRef
attributes, they will be deleted and replaced with the revised entries.
There is no caption layout support. The portlet will be responsible for handling the workspace switch using the context bus.
Related links
Configuring sidebar zones
Customize how the sidebar zone will function in your NexJ application by editing its metadata attributes.
To configure the sidebar zone metadata:
Your sidebar zone metadata has been updated and saved.
Validate your model and restart the application server for the changes to take effect.
Related links
Sidebar zone layout modes
Sidebar zone properties and attributes
Configuring sidebar zone icons
Customize the buttons used to toggle sidebar zone visibility by changing the icon files. Icon files must be 37x57 pixels. The following files are used as sidebar zone icons:
sidebar_l_closed.png
: Closes a sidebar zone on the left side of the screen.sidebar_l_open.png
: Opens a sidebar zone on the left side of the screen.sidebar_r_closed.png
: Closes a sidebar zone on the right side of the screen.sidebar_r_open.png
: Opens a sidebar zone on the right side of the screen.
Info
To hide the sidebar zone icons, replace each of the icon files with a blank image sized at 1x1 pixels.
To change the sidebar zone icons:
- Using Windows Explorer, open the following directory:
<project>/src/nexj/core/meta/sys/icons
. - Copy your customized icons into the directory overwriting the existing files.
- In NexJ Studio, open the Presentation layer and click the Icons tab.
- Right-click in the model view sidebar and select Refresh.
- Open the files you have replaced to confirm they appear as intended.
Your sidebar zone icons have been revised.
Validate your model and restart the application server for the changes to take effect.
Sidebar zone API
NexJ CRM has Scheme and JavaScript APIs that toggle the visibility of sidebar zones. They are available for both flat and rich web applications.
For more information on the sidebar zone APIs, see:
- Scheme: PortalAPI.setSideBarVisibility
- JavaScript: PortalAPI.setSideBarVisibility