Adding new functionality to the CaseBuilder

I’ve been playing with the idea to add new functionality to the CaseBuilder in order to overcome a few design issues my clients have been facing.

For instance i figured it would be nice to be able to add additional css properties to widgets, instead of only being able to set the width/height in px/%. Another idea was to create a tab-container widget to accommodate other widgets while preserving the wiring.

Great ideas and all, but after starting the development of the latter i discovered there isn’t actually a plugin model for the CaseBuilder. Of course it is possible to develop widgets, but unfortunately the widget’s json only has a few preview-icons, when it comes to the design-time part.

Eventually i figured the only way to execute code was to inject a bootstrap as part of the widget title. Anyway, this is what i came up with:


My widget json:

	"Name":" - Widgets",
	"Description":"Custom widgets made by Ivo",
			"title":" - Widgets"
			"title":"Advanced Layouting Adapter<img onload='require({paths:{\"AdvancedLayoutingAdapterBootstrap\": \"/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap\"}});require([\"AdvancedLayoutingAdapterBootstrap/bootstrap\"], function(bootstrap){});' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>",
			"description":"Advanced Layouting Adapter",

Notice the javascript that is part of the title:

    paths: {
        "AdvancedLayoutingAdapterBootstrap": "/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap"
require(["AdvancedLayoutingAdapterBootstrap/bootstrap"], function(bootstrap) {


So, wrapping it up: When the widget is displayed as part of the catalog, an image onload triggers the bootstrap code stored in an accomodating .ear file.

Now, as this hardly seems to be a future-proof way, i was wondering if any of my readers have better suggestions 🙂

Leave a Reply

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