Dynamic and WYSIWYG Styles

From Znode Knowledge Base
Jump to: navigation, search


Display settings section was present in the Store module and there is no provision to add dynamic CSS and WYSIWYG editor formats from Znode Admin.

Problem Statement :

Display settings section was present in the Store module because of this admin needs to give complete store access to the user, while only access to the display settings is required. In order to change the styles on webstore user needs to modify the CSS files on server, there is no provision in Znode to add dynamic styles for webstore. In Znode user cannot add custom formats for WYSIWYG editor, they need to use pre configured formats to update CMS content pages.

Implementation Details :

Following are the implemented changes in Znode:

1. Created/updated entries in ZnodeApplicationSetting table:

a. Removed display setting action from store list page by changing the settings for item name ZnodeStore.
b. For store experience list page created new entry with Item name ZnodeStoreExperience.

2. Create new table named ZnodePortalCustomCss with following columns:

a. PortalCustomCssId - primary key.
b. PortalId - to represent the portal.
c. DynamicCssStyle - to store dynamic CSS.
d. WYSIWYGFormatStyle - to store WYSIWYG editor formats.
e. IsActive - by default this will be set to 1, introduced for future purpose.
f. PublishStateId - by default this will be set to 1, introduced for future purpose.
g. CreatedBy, CreatedDate, ModifiedBy and ModifiedDate - this columns to specify who created/modified the record and when.

3. StoreExperienceController of Znode.Admin.Core.Controllers: Created following actions:

a. List: To serve all available store list with manage and publish actions for each, this list is rendered on the basis of ZnodeStoreExperience item of ZnodeApplicationSetting table.
b. StoreSetting: To serve manage store experience page on the basis of portal Id. It consumes GetWebSiteLogoDetails method WebSiteAgent to get data for general setting section of store experience.
c. SaveWebSiteLogo: This action is used to save the General Settings of store experience and for the same, call to SaveWebSiteLogo method of WebSiteAgent is made.
d. PublishStoreCMSContent: Store experience publish handled by this action, it accepts portalId, targetPublishState and publishContent and make call to Publish method of WebSiteAgent.

Note: By default store setting and CMS content will be published from here.

4. StoreExperienceAgent of Znode.Engine.Admin.Agents: GetStoreExperienceList method of StoreExperienceAgent used to fetch the list of stores, this store list will not contain the tools dropdown.

5. DynamicContentController of Znode.Engine.Admin.Controllers: Used to serve the dynamic content for the Znode admin application, GetEditorFormats action accepts portal Id as a parameter and fetch the EditorFormatListViewModel from DynamicContentAgent and return it as a JSON, this model contains the WYSIWYG editor formats for the portal.

6. DynamicContentController of Znode.Engine.Api.Controllers: GetEditorFormats action serves the WYSIWYG editor formats on the basis of portal Id.

7. DynamicContentController of Znode.WebStore.Core.Controllers: Having GetDynamicStyles action which servers dynamic styles.

8. WebSiteService of Znode.Engine.Services, following methods created/updated:

a. GetWebSiteLogoDetails: Fetch ZnodePortalCustomCss entity from repository to set into DynamicContent of WebSiteLogoModel.
b. SaveUpdateDynamicContent(created): To save the contents of additional site styles section, it will update the record in ZnodePortalCustomCss entity if already present or simply perform the save operation.
i. Return type: DynamicContentModel.
ii. Parameter: DynamicContentModel.
c. SaveWebSiteLogo: Initiate call to SaveUpdateDynamicContent method.
d. SaveDynamicStylesToMongo(created): Will fetch ZnodePortalCustomCss for portal Id and insert into the mongo.
e. CopyWebstoreWithinMongo: Call to GetDynamicStyle and DeleteDynamicStyleEntityFromMongo method of PreviewHelper to get and delete the previously published DynamicStyle entity respectively.
f. CopyWebstoreFromSQLToMongo:
i. call to GetDynamicStyle and DeleteDynamicStyleEntityFromMongo method of PreviewHelper to get and delete the previously published DynamicStyle entity respectively.
ii. Call to SaveDynamicStylesToMongo method if value of publishCMSContent is true.

9. DynamicContentService of Znode.Engine.Services: Introduced GetEditorFormats method in which WYSIWYG editor formats are retrieved from repository and deserialized to EditorFormatListModel.

10. TinymceCustom.js:

a. Created GetFormatForEditor method to initiate call to endpoint with current portal Id and success callback as arguments.
b. getFormats and getStyleFormats method used to populate formats and style_formats object of tinyMceObject with custom WYSIWYG editor formats specified by user.
c. getStyleFormats method
d. GetFormatForEditor method is called from reInitializationMce method which is used to initiate tiny mce(WYSIWYG) editor, in success callback of GetFormatForEditor method getFormats and getStyleFormats methods are called to fill custom formats in tinyMceObject. At the end, init method of tinymce is called with tinyMceObject as argument.

11. ZnodeEndpoint.ts: Created GetEditorFormats method with currentPortalId and callbackMethod as parameters, in this method ajaxRequest method of base class is called to initiate ajax request to GetEditorFormats action of DynamicContentController.

Usage: Additional Site Styles section is used to manage dynamic styles for webstore and WYSIWYG editor formats for content pages. 1. Dynamic Styles section: User can dynamically change the styles of the webstore by adding. Once the code has been added, the CMS content must be published from Stores or from Store Experience module before the changes will take effect. Example: Styles added to change the background color and font family.

solid black circle solid black circle

2. WYSIWYG editor styles section: User can create custom WYSIWYG editor formats by adding JSON string in this section. Note: Publish is not required for changes to take effect.

Example: Custom formats added for WYSIWYG editor.

solid black circle solid black circle


  • In order to add a new format, it is mandatory to use the FormatList array. This array supports multiple comma-separated objects.
  • The values within the format key should be added as a JSON string. The JSON string supports the key-value pairs written within single inverted commas only.


User needs to manage the inputs for dynamic styles and WYSIWYG editor styles section, if wrong input is specified for both the sections then changes will not take effect.