Search This Blog

Wednesday, December 7, 2016

50 shades of grey or thoughts on making the XAF Web UI closer to its clients

Last week, I posted a case study on the New XAF Web UI from our DevPark customers, which caused another wave of feedback on the subject in our team blog, Support Center, social networks and in private discussions with passionate users. All of this was very much appreciated. In this post, I want to address some of the hot points raised as well as communicate our plans regarding this Web theme evolution. 

First, let me provide a little more background on the new web style. Originally, the XAF theme was designed and implemented bearing both hand-held touch devices and desktop browsers in mind. The new design fully reflects our vision of modern web interfaces and was created in close collaboration with our lead UI designer Mike, whom I respect a lot.  He also made up our company web sites, as well as a ton of other DevExpress desktop, web and mobile products and the ASP.NET themes in particular. Being derived from the Moderno theme, the XAF theme and the ideas built in it were  later reflected in newer themes like Moderno and iOS.

Like with any new thing in the world, when this XAF feature was first presented, there were (and still there are) "haters" and supporters who have their own values  and arguments. For instance, for ones it may be a positive change (e.g., "The new web style with its larger UI elements has also allowed us to rethink the whole UX concept and focus on the application data and functions that matter for end-users most of all"), while for others the same goodies may be not desirable (e.g., "Currently I develop LOB applications where these larger UI elements are not very well suited at all (screens with lot of info)..." or "my ideal UI is like the 75% zoom view of the current new UI"). Similarly, some may not like grayed icons or miss the old theme chooser, while others may truly love the current single theme with its large space, increased fonts and editors, collapsible layout groups, emphasis with capital letters and other essential attributes of the new web style. That is totally understandable, and we appreciate each side.  It is also clear that everyone's client needs for a line-of-business web portal may differ a lot and require different tools or customizations. Like I recently commented in the blog: "There is no "one size fits all" product/theme/whatever and as developers we sometimes need to customize things to meet our client's needs better. For instance, large UI elements can be made smaller, white colors can be made gray using CSS and other techniques."

The latter does not mean, however, that the development of this theme is frozen and we do not want to better meet varying customer needs. Ideally, and at least for the most typical tasks, it must be equally suitable with little or no customization for both an HTML/CSS newbie or a professional web master easily locating and changing required DOM element styles in the Developers Tools window of a favorite browser (learn more...).

Thus, we always listen to each user feedback and are constantly improving the theme according to the most popular requests.  Just to give you a few recent examples: there were a good number of requests to simplify the process of adjusting the New Web UI to match corporate colors. With v16.2, this process became much easier with the new options for changing the base color and font in code or configuration files of your app. Our XCRM.Web demo now contains a custom color/font scheme picker to demonstrate the use of these new release capabilities:

In addition, the XAF theme was better integrated with the ASPxThemeBuilder & ASPxThemeDeployer tools offered by our DevExpress ASP.NET team for creating and deploying custom themes. These actions appear to be a good start towards a "true" themes chooser requested by some customers or rather their end-users, who liked a vast number of predefined styles. The idea under consideration is  that we may support changing more theme parameters at runtime (e.g., the white background was reported as eye-fatiguing by some users), i.e., not only the main color and font.

Another example - yesterday, we sat with Mike and discussed a user feedback on the not very distinctive appearance of navigation groups and items.  As a result, the change below was incorporated to hopefully solve this problem completely:

Your feedback is needed!
We hope that your feedback will continue playing an important role in this evolution process. To help us better understand your use-case scenarios and needs and potentially prioritize them regarding future product updates, 
Q1: I would kindly ask you to provide us with the following info every time you encounter a need customize the default Web UI look and feel:
    1.1 Two screenshots: one with the original screen you did not like and the other illustrating the customized or expected look/behavior;
    1.2. Quickly describe your end-user requirements as well as the customizations  you have made or plan to make (e.g., attach example C# or CSS code).

My team and I are looking forward to hearing from you!

About Bootstrap support
I cannot provide you with any ETA on supporting this in XAF at this time. For now, I can only say that our DevExpress ASP.NET team is working on creating Bootstrap-compatible controls (blogs: one, two, three).

Technically, it is possible to support these new controls yourself by creating custom List and Property Editors from scratch, but I must warn you that this is quite a resourceful task, which you will need to implement on your own. You can better imagine the amount of work to be done to support this after checking the third-party addon for XAF created by one of our customers.

Q2: Would you please also clarify one important thing: why are you looking forward to using Bootstrap instead of using the responsive New Web UI theme (maybe slightly customized) in the first place? 

I anticipate that this is mainly due to the availability of many custom themes in the community, but I wanted to hear an explicit answer from you and your fellow developers if possible. 
My team and I will greatly appreciate your feedback and will take these scenarios/requirements into account for the future.


  1. Thank you guys for improving certain business request as listed in this article, I found myself always asking why there are some screen or views that are missing basic business needs, which seem to me as a must without creating an specific view controller or some other kind of Css, case and point the color difference the Navigation Group menu, I was ask this exact same issue by one of my client last week, my answer was , I'm sure it can be done, I will look into it, but I admit that it made feel dumb that I had not look into it before even though it was on the list of to do, but I knew that it will take more time that I had to get the project out based on other priorities.

    One additional suggestion regarding this same Navgroup, is to have left padding between the Group and Items, to look more like a tree nav.
    It was also witching the client request.

    I thank you again for the improvements, Keep up the good work.

    1. @Boris: Thanks for your feedback - we are happy to hear that you liked these small improvements. As for your last request, our team will take it into account for the future. In the meantime, you can increase a left padding for the navigation items using CSS. The article contains text and video instructions for accomplishing similar tasks.

    2. @Boris: Here is the exact style for you:
      .xafNav .dxtvControl_XafTheme.TreeViewNavControl .dxtv-nd​​​ {
      padding-left: 25px​!important;​

      .dxnbLite_XafTheme .dxnb-item {
      padding-left: 25px​!important;​

  2. I did notice that when an additional tier is in the group items like .... is does not expand the padding far enough to the left

    1. Thanks for your update, Boris. I'll answer you in