Overview
Our 2021 Spring release candidate introduced an updated/refreshed style for Bootstrap applications. While we continue to support the existing Bootstrap style that was originally shipped, we wanted to give our customers an option of a second bootstrap stylesheet to give more options. The update stylesheet, while similar to the existing, offers a more modern look and feel. An example of the new look can be seen here:
Implementation
This updated look is controlled fully within the stylesheet file, no template changes are made/required.
Below we’ll walk through some situations of how you can work with this new stylesheet.
Scenario 1
I’ve created a new Bootstrap Data Dictionary and want to use this updated theme.
All new bootstrap dictionaries will automatically use this new look. No action is required, the process is automatic.
Scenario 2
I’ve created a new Bootstrap Data Dictionary but wish to keep the older Bootstrap stylesheet look.
- Navigate to Admin -> Dictionary Configuration -> Runtime Application Settings
- Scroll to the end of the list and modify the “Global stylesheet to use in this dictionary” value. Change from “mpowerappsv2.css” to “mpowerapps.css.”
- Save the property change. You do not need to recompile any applications after this change but you may need to restart Tomcat before the change goes into effect.
Scenario 3
My current/existing Data Dictionary I do not wish to change the way it looks.
Good news! Your existing Data Dictionary will continue to use the same look and feel that you and your users have grown accustomed. We will only automatically use the new style for newly created Data Dictionaries.
Scenario 4
I really like this new style. How can I change my existing Bootstrap Data Dictionary to use the new look?
This is possible and requires a few extra steps.
- You need to change all references in your dictionary’s html files to reference bootstrapv2.css instead of bootstrap.css. Additionally, change these files to reference mpowerappsv2.css rather than mpowerapps.css. There are many tools outside of m-Power to do this. Notepad++ has a “Find in all files” feature to make short work of this.
- Navigate to Admin -> Dictionary Configuration -> Runtime Application Settings. Click “Property Options” and select “Text Mode.” Within the “Program Options” area, add the following:
- Finally, you’ll need to update some pre-defined colors. To do this, head to “HTML/JS/CSS Files” and select “Application CSS.” Then click “View Source.” Remove the 11 color lines (Line #14 through Line 24). Make sure to press “Save” when done.
Following those steps will change all existing applications as well as directing all newly made applications in your existing dictionary to use the new stylesheet.