A Flexible View Control for XPages

• A re-usable custom control and companion libraries that can be dropped into ANY Domino XPage application
• Built on jQuery and DataTables, and REST data
• Extremely versatile and configurable
• Born out of frustration with the out-of-the-box tools in XPages.
• Goals:
  • Streamline view creation and avoid rewriting same code over and over
  • Move management of views out of the view design element as much as possible
  • Separate logic and data
  • Minimize view creation - no more single-use views!

How It Works - View Definitions

• View Definitions are the 'wiring' for the Flexible View Control
• They are stored as Lotus Notes Documents and act as the View design for the Flexible View Control
• One View can be represented many different ways with different sorting, column orders and even categorization
• The Lotus Notes View simply acts as a table of data served via REST services

Getting Started

1. Clone the project into a new On Disk Project (ODP) and import into a new .nsf in Domino Designer
   1. Thomas Adrian has a quick and easy guide here on how to do it
2. Build the project in Domino Designer
3. Load the adminConfig.xsp to define some basic information that the view control needs to work properly
4. Create your first view definition
5. Add the ccRestView custom control to an XPage
6. Configure the ccRestView custom control to point to your view definition

Project Assets

File	Type	Description
ccRestView	Custom Control	This is the flexible view control
adminConfig.xsp	XPage	This XPage is used to setup some basic configuration information. The data is stored in a Notes document.
adminViewDefinitionDoc.xsp	XPage	The XPage used to create View Definitions. Each View Definition is stored in a Notes document.
adminViewDefinitions.xsp	XPage	The XPage used to display View Definitions. Note:This XPage uses the Flexible View Control!.
restServices.xsp	XPage	Default XPage where Rest Services are located.
csjsCCRestView.js	script	Client side JavaScript library
ssjsCCRestView.js	script	Server side JavaScript library
disable_amd.js	script	Client side script to turn off AMD to allow scripts that use AMD (for example the DataTables source js) to load without issue. Otherwise AMD needs to be disabled directly in the source script. This file is utilized in the project theme.
enable_amd.js	script	Client side script to turn off AMD back on after scripts that utilize AMD are loaded. This file is utilized in the project theme.
ccRestView.css	stylesheet	Client side script to turn off AMD back on after scripts that utilize AMD are loaded. This file is utilized in the project theme.
ccRestView.theme	theme	Defines assets (js, css, etc.) to be loaded at runtime that are contained in the project or linked to from CDN resources (jQuery, DataTables)
adminViewDefinition	form	Underlying form associated with View Definition docs.
Admin\View Definitions	View	Underlying view associated with View Definition docs.
configDocument	form	Underlying form associated with the config document.
vwConfig	View	Underlying view associated with adminConfig document.

Custom Control Properties

Required Properties

Property	Type	Description
thisView	Text	Unique identifier for this view
viewKey	Text	Tells the control which view definition to use
dataTableClass	Text	A CSS class name that gets applied to the DataTable and is used to refer to the table programmatically

Data Properties

Property	Type	Description
keys	Text	Values that will be added to the REST service query string in the format of &keys=<keys>
keysIsCategory	Boolean	Default is ‘false’. If true, the keys value will be added to the query string as &category=<keys>
search	Text	Should be a Domino full text search query
queryString	Text	Additional parameters that will be added to the REST service call
scroller	Boolean	Default is ‘false’. When set to true the DataTable scroller functional will be enabled. This is useful for larger data sets as it only creates the table rows as they are needed. See the DataTables documentation for more info.
scrollerCount	Number	Default is 0. If greater than 0 then the REST Service will only call for x amount of documents. The DataTable will keep calling the REST service until all records have been received.

Properties that affect the DataTable appearance

Property	Type	Description
dataTableClassDefault	Text	Can be used to override the default DataTable appearance.
showFixedHeader	Boolean	Defaults to ‘true’. Creates a fixed header that allows the table to be scrolled so that the header is always visible
fixedHeaderClass	Text	CSS class name that gets applied to the div that wraps the table header. Only applies if showFixedHeader=true
showFooter	Boolean	Defaults to ‘true’. Creates a footer at the bottom of the table that remains visible when the table is scrolled
fixedFooterClass	Text	CSS class name that gets applied to the fixed footer
showInfo	Boolean	Defaults to ‘true’. Show or hide the datatables_info div
infoClass	Text	CSS class name that gets applied to the datatables_info div
infoAttachTo	Text	A jQuery selector (class or id). During the initComplete event the datatables_info div will be moved to this element
Ordering	Boolean	Default is ‘true’. Turns column sorting on/off
showFilter	Boolean	Default is ‘true’. Shows/hides the DataTable filter
showFilterText	Boolean	Default is ‘true’. Shows/hides the text next to the DataTables filter field
filterPlaceholder	Text	Text that will placed in a placeholder attr for the filter field
filterText	Text	Text that can be used to replace the default DataTables filter label of ‘filter’
filterAttachTo	Text	A jQuery selector (class or id). During the initComplete event the datatables_filter element will be prepended to this element
showPaging	Boolean	Default is ‘false’. Turns paging on/off PAGING CONTROLLED FROM VIEW DEF
attachPagerTo	Text	A jQuery selector (class or id). During the initComplete event the datatables_info div will be moved to this element
showCellBorders	Boolean	Default is ‘false’.

Events

Property	Type	Description
createdRow	Text
drawCallback	Text
initComplete	Text
loadOnInit	Boolean	Overrides the loadOnInit value in the Vew Definition. When loadOnInit is true the DataTable is initialized when the page loads. When false the DataTable needs to be initialized by calling .build()
refreshInterval	Number	Default is 0. The DataTable will be reloaded every x milliseconds
multiValue	Boolean	Default is ‘false’. If true then multi selection can be handled in the rowCallback
onError	Text