Using CWI as sliding overlay

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: "https://[hostname]/Congree",
        authentication: {
            userName: username,
            password: password,
            accessTokenURL: "http://[hostname]/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
    });
};

Property	Description

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.
overlayPosition	Defines where CWI is being positioned. 1 - on the right hand side, 2 - on the left hand side
shouldSowTacheles	Defines if CWI is active or not. true - it's active, false it's inactive