/
Using CWI as sliding overlay

Using CWI as sliding overlay

Owned by Claudius Hörth
Feb. 08, 2024

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,
 					"overlayPosition": 1,
					"shouldShowTacheles": true

                });
        };


PropertyDescription
autoShowSidebarOnEditorFocusShows CWI the sidebar when a user clicks on editor
autoShowSidebarOnEditorErrorShows 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.
autoHideSidebarOnErrorsFixedHides CWI when all errors have been fixed.
overlayPositionDefines where CWI is being positioned. 1 - on the right hand side, 2 - on the left hand side
shouldSowTachelesDefines if CWI is active or not. true - it's active, false it's inactive

Related content