CWI can be integrated into a web application in a fixed place visible all the time. In some situations it might be more reasonable to make it visible in a way that it slide in and out when needed.
To use CWI as an overlay is the right way to do so.
The following example shows how to configure CWI to make it a slideable overlay. The part of the initilization is left empty.
congree.loadSidebar = function (username, password) {
// loader code custom to host app
congree.sidebar = new Congree.Sidebar({
serverAddress: <host>/Congree,
authentication: {
userName: username ,
password: password ",
accessTokenURL: <host>/congreeidentityserver/connect/token,
loginType: "usernamePassword",
},
initialRuleSetName: "<RuleSet>",
// culture: "de-DE",
editors: [
Congree.AdapterFor.TextInput('.TextArea', 'para')
]
});
congree.sidebarOverlay = congree.sidebar.asOverlay({
overlayIconPosition: null,
overlaySize: { top: 0, bottom: 0 },
},
{
"autoHideSidebarOnEditorFocusLost": true,
"autoHideSidebarOnErrorsFixed": false,
"autoShowSidebarOnEditorError": true,
"autoShowSidebarOnEditorFocus": true
});
};
| Property | Description |
|---|---|
| autoShowSidebarOnEditorFocus | Shows CWI the sidebar when a user clicks on editor |
| autoShowSidebarOnEditorError | Shows CWI the sidebar when there is an error on the page |
| autoHideSidebarOnEditorFocusLost | Hides CWI when on of the editors lost the focus, i.e. when the user clicks somewehere outside one of the editors. |
| autoHideSidebarOnErrorsFixed | Hides CWI when all errors have been fixed. |