In this article, we are going to look at the Global CSS feature. This has been a highly sought-after feature within customer base and I am pleased to announce that starting AgilePoint NX 7.0 Software Update 2, AgilePoint is going to support applying a global CSS to all your forms.
Global CSS Styles is a very useful feature for eForms because it allows an organization to define a corporate CSS Style and apply it to all the forms their designers are creating. Any changes which are done to the global style can be immediately picked up by all forms.
Previously the scope of CSS was limited to an application level which meant I can share CSS between forms belonging to same application but if I am creating a new application, I had to add a copy of shared CSS to the new application. Though this gives flexibility for one application CSS to be tweaked independent of the other app, it meant that any changes done in CSS did not get applied automatically to other apps which is what most corporate environments would like to have.
With Global CSS, you can keep the amount of app specific style-sheets down to a minimum, which helps readability when we come to edit the styles, and also keeps the application specific style-sheet’s file size down. Also any changes done to centralized global style-sheet is picked by all application forms.
However, we wanted to ensure that form designer still has some control over this feature specially when it comes to apps created prior to 7.0 SU2, where he might have done few app specific styling and might not want to lose it suddenly.
So here are few rules
– If no global CSS is found, the forms continue to pick up either the base product styling or if form designer has uploaded a custom CSS, that will be applied. If global CSS is found, it will follow the inheritance concept where it will first apply the global CSS and if you do any form specific or application specific CSS on top of it such that CSS selector overrides the settings of your global CSS, then this form/app specific CSS selector will get preference.
– By default, the global CSS does not get applied to any forms created prior to AgilePoint NX 7.0 SU2 release. This is to ensure that any custom styling done on your already published apps is not broken. You have an option of going to form setting of existing form and remove your styling and apply global CSS manually if you like pre-7.0 SU2 apps to pick the global styling. This will need the application to be published. We do have a switch which lets you change default behavior where you can decide to apply global CSS by default to apps created prior to 7.0 SU-2 but it comes with a warning message that we highly recommend keeping it off and selectively turn on the global CSS for such apps using form settings after you have tested your app.
– For any new blank forms in new application or existing application, created after 7.0 SU2 release and if global CSS is available, it will be turned on by default to enforce corporate styling. As a form designer you have an option to turn it off for your form but that is not recommended as you would most likely want to stay with corporate styling. This feature is provided for some special cases where global styling has to be off for new apps.
Here is a short video on how this feature works and maintains backward compatibility.
Note: At the time of recording, this feature was still under development and since then few changes have been done to labels and displayed messages so you might notice few such changes in product UI which is different from the video.