Saturday, 12 April 2014

Context-Specific CSS Rules

One of the most frequent questions on the Xataface forum is how to hide parts of the UI in a context-specific way.  E.g. You might want to hide the search box only for a specific table, or for a specific class of user, or only when logged in.  As with most things in Xataface, there are many ways to achieve this, but one of the most flexible methods is using CSS.

If you haven't already added a custom CSS file to your application, you can do so by way of the Dataface_Application::addHeadContent() method.  Usually I place this inside my application delegate class' beforeHandleRequest() method.  E.g.

For this example, you would create a file named style.css and place it in the root directory of your application.  Because the beforeHandleRequest() method is called at the beginning of every request, this will result in the style.css stylesheet being included in every page of the site.  Now, if we wanted to hide the search box on the top of the UI (assuming we're using the g2 theme), we could add the following rule to our CSS file:

(This is because the "id" attribute of the search form is "top-search-form".  See the template source here).

This solution hides the search box throughout the entire site.  But what if you want to only hide it for certain tables.  E.g. I recently received a question on the forum about hiding the search box only in the "dashboard" table.  Two possible solutions for this come to mind:

  1. Create a separate stylesheet for the dashboard table and only include it if the request is for the dashboard table.

  2. Add CSS classes to the HTML <body> tag conditionally, and then use these to add CSS rules that only apply for desired context:

    This solution makes use of the block__body_atts to add a class attribute to the <body> tag and adds a CSS class of the form "table-{tablename}" to the body tag which can be targeted from the CSS file. In the case of the dashboard table, the <body> tag will have a "table-dashboard" class.
I personally prefer the second approach because it is much more flexible, and we can keep all of our styles in a single stylesheet.  For example, if we wanted to hide the search form for both the dashboard and foobar tables, we would just change our rule to:
This strategy can be expanded to mark more than just table contexts. For example, you could also add classes to mark whether the user is logged in or the role of the user.  Then you could create CSS rules that only apply to a particular role of user or whether or not the user is logged in.

No comments:

Post a Comment