asked on September 2, 2020
We currently override Flexmonster styles. We followed these guidelines, https://www.flexmonster.com/doc/customizing-appearance/. This restyling (via less styles) was necessary to make the Flexmonster Component look like PROS components. This required advanced styling beyond just changing colors and fonts. For example, we had to change the position of the elements to move the Dialog buttons from the top to the bottom-right. Our Architects are concerned that these less style overrides may conflict with future Flexmonster style changes. This has yet to happen but we must address the concern before a quality problem is introduced. We use other third-party components that provide classname properties to make such customization less likely to cause styling conflicts. This does not seem possible with Flexmonster today but perhaps this is planned for a future Flexmonster release. Please let us know if that is the case. Or, if that is not the case, then please suggest a safer way for PROS to override Flexmonster styles.
Thank you,
Jason Hammerle
Sr Tech Lead, Development, PROS
⋅ September 4, 2020
Hi Jason,
Thank you for posting your question.
To start with, we'd like to mention that it is highly recommended to keep your custom styles in a separate Less/CSS file where only the necessary parts are overridden, as it is suggested in the mentioned tutorial.
Furthermore, kindly note that all of the key UI elements already have their corresponding classes & IDs which can be used for overriding the base styles and creating your own. Do you think you could tell us a little bit more about your situation so that we can understand your use case better and perhaps provide you with the already existent class names of the necessary HTML elements?
Please let us know what you think.
Best regards,
Mykhailo
⋅ September 10, 2020
Hi Mykhailo,
We keep our custom styles in a separate Less file as you suggest.
We also understand your UI element have corresponding Classnames & IDs.
We have successfully styled Flexmonster to look like our components. All good on this end.
Our concern is that you may change one or more of the following in a new version:
If any of these change, then it will likely cause a styling issue and/or other quality problem with our webapp. Can you guarantee these will not change with future releases? Or, if there are changes, can you notify us so we can plan accordingly?
Thanks and Best Regards,
Jason
⋅ September 14, 2020
Hi Jason,
Thank you for further clarifying your concerns regarding potential styling issues.
In general, such breaking changes in styling rarely happen in Flexmonster component.
It is worth mentioning, however, that we are currently working on particular UI accessibility improvements, which require us to change some elements' IDs to class names.
With that in mind, we will make sure to reach out to you with a list of changed items after the release is introduced ETA Sep 21st, so that you can modify your code accordingly if necessary.
Please let us know if there is anything else we can help you with at the moment.
Kind regards,
Mykhailo
⋅ September 14, 2020
Hi Mykhailo,
Yes, please reach out to us with potential breaking changes in this upcoming and future releases.
Thank you very much,
Jason
⋅ September 22, 2020
Hi Jason,
Hope you're doing well!
As promised, we are sending you the full list of ID's that were removed in version 2.8.16 and replaced with the classes of the same names:
"#fm-add-btn",
"#fm-add-group-view",
"#fm-aggr-display",
"#fm-aggregations-view",
"#fm-alert-view",
"#fm-and-label",
"#fm-branding-bar",
"#fm-btn-add-measure",
"#fm-btn-add-measure-2",
"#fm-btn-close-fields",
"#fm-btn-collapse-expand-all",
"#fm-btn-connect",
"#fm-btn-open-fields",
"#fm-build-version",
"#fm-calc-display",
"#fm-calculated-view",
"#fm-cancel-btn",
"#fm-chart",
"#fm-chart-legend",
"#fm-charts-filters-btn",
"#fm-charts-filters-container",
"#fm-charts-view",
"#fm-cols-filter",
"#fm-cols-resize",
"#fm-cols-sheet",
"#fm-conditions",
"#fm-conditions-dropdown",
"#fm-data-sheet",
"#fm-datepicker-1",
"#fm-datepicker-2",
"#fm-dates-filter-view",
"#fm-details-label",
"#fm-drag-handle",
"#fm-drillthrough-view",
"#fm-fields-view",
"#fm-filter-label",
"#fm-filter-sort-row",
"#fm-filter-view",
"#fm-filters-col",
"#fm-font-family",
"#fm-font-size",
"#fm-formula-input",
"#fm-func-btn-group",
"#fm-grid-view",
"#fm-header-toolbar",
"#fm-icon-display",
"#fm-info-icon",
"#fm-inp-proxy-url",
"#fm-interval-dropdown",
"#fm-labels-filter-btn",
"#fm-labels-filter-view",
"#fm-landscape-radio",
"#fm-left-scroll-button",
"#fm-link",
"#fm-list-wrapper",
"#fm-lst-columns",
"#fm-lst-hierarchies",
"#fm-lst-measures",
"#fm-lst-pages",
"#fm-lst-rows",
"#fm-measures-dropdown",
"#fm-members-filter-list",
"#fm-message-label",
"#fm-moreicon-display",
"#fm-name-input",
"#fm-next-btn",
"#fm-num-input-1",
"#fm-num-input-2",
"#fm-numbers-filter-view",
"#fm-page-filter",
"#fm-periods-dropdown",
"#fm-popUp-modal-overlay",
"#fm-popup-conditional",
"#fm-popup-format-cells",
"#fm-popup-olap",
"#fm-popup-options",
"#fm-portrait-radio",
"#fm-preloader-view",
"#fm-prev-btn",
"#fm-prompt-view",
"#fm-remove-btn",
"#fm-right-scroll-button",
"#fm-rows-filter",
"#fm-rows-resize",
"#fm-rows-sheet",
"#fm-sample",
"#fm-select-counter",
"#fm-sheet-headers",
"#fm-sort-col",
"#fm-sort-label",
"#fm-spinner",
"#fm-text-display",
"#fm-time-filter-view",
"#fm-txt-input-1",
"#fm-txt-input-2",
"#fm-ui-dp-month",
"#fm-ui-dp-year",
"#fm-values",
"#fm-values-filter-view",
"#fm-version-label",
"#fm-wrap-columns",
"#fm-wrap-measures",
"#fm-wrap-pages",
"#fm-wrap-rows"
This is available in the 2.8.16 version of Flexmonster: https://www.flexmonster.com/release-notes/
You are welcome to update the component. Here is our updating to the latest version guide for assistance: https://www.flexmonster.com/doc/updating-to-the-latest-version/
Please let us know if this helps.
Best regards,
Mykhailo
⋅ September 22, 2020
Looks like we might have conflicts based on a quick search.
We'll run some tests with 2.8.16 and let you know what we find.
Thank you for the heads up.
Regards,
jason
⋅ September 23, 2020
Hi Jason,
Thank you for the quick response – please do let us know if any particular issues emerge that we can help you with – we will be happy to assist.
Regards,
Mykhailo
⋅ October 1, 2020
Hi Jason,
How are you?
Just checking in to ask whether everything went well on your side with the latest CSS changes.
We would be happy to hear your feedback.
Regards,
Mykhailo
⋅ October 14, 2020
Jason,
Hope you're doing well!
We were wondering if you were successful in adapting your CSS configurations to the changes introduced in 2.8.16.
Please let us know in case there's anything we can assist you with in this regard.
Kind regards,
Mykhailo
⋅ October 14, 2020
Thanks for the follow-up. We are still working with our Architecture team to import 2.8.16 into our Artifactory so we can test it out. You reminder reminded me to ping that team again 🙂 We'll let you know what we find.
⋅ October 15, 2020
Jason,
Great, thank you for your response – we will be looking forward to further updates.
Have a nice day ahead!
Mykhailo
⋅ January 20, 2021
Hi Mykhailo,
We finally upgraded to 2.8.19 and ran into style conflicts which we resolved on our end. Thank you for the heads up. Please give us (PROS) another heads up when Flexmonster introduces significant style changes after 2.8.19.
Regards,
jason
⋅ January 22, 2021
Hi Jason,
It is good to hear from you – we're glad you've resolved all the issues!
We are currently not planning to introduce any similar changes to Flexmonster styles in the near future. If, however, such changes are made, we'll make sure to cover them in our release notes.
As always, feel free to reach out in case there is something we can help you with.
Regards,
Mykhailo
