show / hide menu

CSS Editor

The CSS Editor and Publish feature improves styling flexibility by enabling tenant-specific customization with a user-friendly interface for creating, editing, previewing, and publishing CSS in real-time. 

Key Highlights

  1. Custom CSS Creation: 
  2. Users can create and manage custom CSS directly from the designer through the integrated CSS Editor. 
  3. Styles are specific to each tenant, allowing for unique branding and layout configurations. 
  4. User-Based Styling: 
  5. The CSS Editor is accessible to users, enabling individuals or teams to modify styles without backend involvement. 
  6. This empowers design and UI teams to make quick, independent updates. 
  7. Live Preview: 
  8. Style changes can be previewed in real time using the check-in option. 
  9. Immediate visual feedback helps users verify changes before applying them. 
  10. Publish Capability: 
  11. Once finalized, styles can be published directly from the editor. 
  12. Publishing both saves and deploys the CSS, making it instantly available in the application. 
  13. Tenant-Specific Loading: 
  14. Published styles are automatically applied based on tenant context. 
  15. This ensures isolated and consistent styling for each tenant, with no impact on others. 
  16. Force Check-In Functionality: 
  1. Force Check-in option is displayed in the Editor Actions section only when the editor is currently open by another user. 
  2. The previously saved data by the other user remains intact and stored in the database, and the latest content is accurately loaded and displayed in the editor after the force check-in. 
  3. Version History: Rollback & Compare: 
  4.  A version history feature has been included to support rollback and comparison of CSS changes, enabling better tracking of updates that is particularly useful when multiple users are editing the same content.  
  5. When changes are published, a publish history is maintained for auditing and tracking purposes. 

Accessing the CSS Editor from HTML Designer 

A “CSS Editor” link is available in the side navigation panel in the HTML Designer, offering quick access to the CSS editing interface. 

The “CSS Editor” link is in the left-hand navigation panel of the HTML Designer. Clicking this link directs users to a dedicated CSS Editor page, which is tenant-specific, ensuring that styles are both isolated and customizable for each tenant. From this page, users can create, edit, and preview custom styles tailored to the selected tenant. 

The CSS Editor page offers multiple options to edit and manage tenant-specific styles. To ensure proper version control and prevent conflicts, the editor follows a checkout mechanism. Here’s a breakdown of the options and workflow: 

Checkout and Edit Mechanism

  1. Checkout the Editor: 
  2. To begin editing, the user must first check-out the editor. This action locks the file for editing, ensuring that only one user can edit the file at a time. 
  3. Once checked out, the user gains exclusive access to modify the CSS file. 
  4. Editing the CSS File: 
  5. After checking out the file, the user can freely edit the CSS as required. 
  6. The editor provides an interface for making both minor and major style changes to the tenant-specific CSS file. 

Available Actions 

  1. Save:
  2. The Save option stores the current changes locally in the editor as well as to the DB but does not yet publish or deploy them to the application. 
  1. Download:
  2. The Download option allows the user to download the current CSS file to their local machine for backup or further use. 
  3. Upload:
  4. The Upload option allows the user to upload the CSS files. 
  5. Dark Mode: 
  6. The CSS Editor loads with the light theme by default, and users can switch to dark mode when needed 
  7. Force Check-In:
  8. Ensure that the “Force Check-in” option appears in the Editor Actions section only when the editor is currently open by another user. 
  1. This condition prevents unnecessary check-ins and ensures proper coordination when multiple users access the editor. 
  2. Versions: 
  3. On clicking the “Versions” button in the editor, a Version History window appears, displaying all available saved versions.  A new version is added to the editor’s version history with each edit and check-in; however, no version is created if the editor is checked in without any modifications. 
  1. The user can roll back to any previous version by clicking the rollback option available in the version history.  
  2. When two versions are selected from the version history and the Compare option is clicked, a Comparison window opens displaying the differences between the selected versions clearly highlighted. 
  1. The Compare functionality works only when exactly two versions are selected, and it remains disabled if fewer or more versions are chosen to prevent invalid comparisons.  
  2. Use the Rollback option and the Version Change ComboBox to switch between versions and restore any previous version if needed. 

Live Changes in Preview or Webpart 

The CSS Editor includes a Live Preview feature that allows users to see changes in real time as they edit, dynamically updating the styled form or control within the same browser without needing a page reload. 

How the Live Preview Works

  1. CSS Class Updates: 
  2. When a user adds or modifies a CSS class in the editor, the changes are applied directly to the control or form on the page. 
  3. The live preview displays the updated styling in the same browser, reflecting the changes immediately as they are made. 
  4. Real-Time Changes After Checkout or Publish: 
  5. Once the user checks out the CSS, the changes are instantly triggered in the live form view. 
  6. There is no need to reload the page—the form updates automatically to reflect the latest CSS modifications. 
  7. Seamless Experience: 
  8. The Live Preview feature ensures a seamless and immediate visual feedback loop, allowing users to fine-tune styles and see their effects in real-time without interrupting the workflow. 

Example: Styling a Button Using the CSS Editor 

How to Use the CSS Editor

  1. Create a Form and Add a Button: 
  2. In the HTML Designer, create a new form and add a button control to it. 

b.   In the form’s Custom Style panel, assign a unique class name to the button. 

 (e.g., .testJBtn). 

  1. Save and Open the Form in a New Tab: 
  2. Save the changes and open the form in a separate browser tab to test and verify the button’s initial appearance. 
  3. Navigate to the CSS Editor: 
  4. In the HTML Designer’s side navigation, click the CSS Editor link to open the CSS Editor page. 
  5. Checkout the Editor: 
  6. In the CSS Editor page, click Check-out to lock the file and enable editing. 
  7. Style the Button: 
  8. In the CSS Editor, add the following CSS code to style the button using the class you created (.testJBtn): 

.testJBtn button { 

color: rgb(0, 234, 218) !important; 

background-color: green !important; 

font-size: large !important; 

} 

  1. The button will now have the specified styles, including cyan text, green background, and large font size. 
  2. Click Check-in: 
  3. After applying styles, perform a Check-in in the CSS Editor. 
  4. The CSS file is saved to the database and deployed to the site, making the changes live. 
  5. View the Updated Button Style: 
  6. Return to the form previously opened in the new tab to observe that the button’s style has been updated based on the applied changes. 
  7. The updated button style is applied instantly after check-in, with no need to reload the page, as the changes take effect immediately.