Getting the Input reference selector widget a Mendix 5 look

So, to get things started on this blog, here’s a snippet for the Input reference selector widget (available in the AppStore) I recently shared. While the widget hasn’t seen any updates since Mendix 5 was released, the widget does still function. (Though I must immediately add that colleagues have reported that the widget does not function properly from 5.18 onwards) The only down side is that its appearance was tailored to how input fields were displayed in the older Mendix 4 version.

Ways of using the widget

What’s so nice about the widget is that it provides users with the ability to select a reference in the form of a search-like input field. The cool thing is that you are also able to make use of a type-ahead functionality. This not only provides the user with an intuitive way to set a reference, it can also help/guide the user through a form.

A good example of the above mentioned scenario is when you’re searching for a specific article number in an Article entity. Let’s say that we have Ordelines, which all refer to an Article. Below is a depiction of how the domain model could look like in it’s simplest form:

Example domain model for Input reference selector widget (Refkit.mpk)
Example domain model for the Input reference selector widget (Refkit.mpk)

If we combine the example from above with the features offered by the widget, the result could be something like displayed hereafter:

Input reference selector (before)
Input reference selector (before)
Input reference selector with dropdown (before)
Input reference selector with type-ahead (before)

As you’ll immediately notice (it’s kind of impossible not to), the earlier mentioned styling of the widget isn’t quite ideal.

Aligning the widget with the Mendix 5 look and feel

I had noticed that other users were also facing the problems I had while implementing this widget for my clients. This Mendix forum post triggered me to share the CSS changes I had previously implemented to override the widget’s behavior, and have it appear more in line with the other fields. So here’s what I used:

/* input reference selector */
.dijitTextBox {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: auto;
    color: inherit;
    height: 30px;
    padding: 6px 8px;
    width: 100%;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.dijitTextBoxFocused {
    border: 1px solid #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
}

.refkitInputRefSelector {
    outline: 0 !important;
}
/* input reference selector - dropdown menu */
.dijitMenu {
    border: 1px solid #ccc;
}

.dijitMenuItem {
    padding: 6px 8px;
}

.dijitMenuItem:hover {
    background: #f5f5f5;
}

Simply add the above snippet somewhere in your theme.css or custom.css file to override the default settings from Mendix. With the help of these lines, I was able to get the following result:

Input reference selector (after)
Input reference selector (after)
Input reference selector with dropdown (after)
Input reference selector with dropdown (after)

Looks much better, right?

Please note that the above snippet should work for at least Mendix version 5.0 till 5.18. Since the change of structure with the new DX-release, a custom theme.css file should still work (thus also the above snippet still should), though I believe Mendix is trying to move everyone to make use of SASS.

Leave a Reply

Your email address will not be published. Required fields are marked *