05. Customising BlackBox Styles

05. Customising BlackBox Styles

<— Reactor Home

When we were looking to Reload Reactor, one of the first cabs off the rank was finding a good JavaScript library to build a new calendar with a modern interface. We weren’t looking long before we stumbled upon the dHTMLx suite of libraries, in particular the Scheduler.

https://dhtmlx.com/docs/products/dhtmlxScheduler/

It looks great just out of the (black) box, but as FileMaker developers, we’re all accustomed to the ability to customise the heck of whatever we build. This article demonstrates how to customise a demo BlackBox, to seamlessly integrate it into your FileMaker application.

A BlackBox is basically a web-page, and is typically comprised of the following:

• JavaScript library, in this instance dHTMLxScheduler

• HTML document, defines the structure of the web-page and how the library communicates with FileMaker

• CSS,  defines the look and feel of the BlackBox

This article concerns just the CSS document. The first part will examine hard-coding a change to the CSS, and the second part of the article will tip its toes in a bit of dynamic Reactor jazz.

Part 1 - Customise the CSS

The xScheduler calendar has appointments with square corners, but maybe you want them to have rounded corners?

You don’t need to be a CSS pro to do this. So how do you know what you need to change to get it looking the way you want, and what do you change it to? We can do this with a little help from our friends; a web browser, and any web-search engine.

First off, let’s find out how to add rounded corners to CSS objects. A quick web-search tells us to use the border-radius property:

https://www.w3schools.com/css/css3_borders.asp

Now we know what we need to change, we just don’t know where to change it. This is where the web browser comes into play.

A useful feature of Reactor is the ability to enter debugging mode. To do this, evaluate the following function in your WebViewer:

Any Reactor BlackBoxes inside WebViewers will show a small Reactor button in the bottom-right corner. You can use this to debug error messages, or more importantly, open the BlackBox in a web browser.

A quick note, these instructions and screenshots relate to Google Chrome. Other Web Browsers will have slightly different names for these areas, but you should be able to figure out how to get there along similar lines.

We are looking to change the style of the Calendar appointment objects. To do this we need to find out what CSS element we need to change. So right-click on one of these appointment elements, and choose ‘Inspect’.

This gives us:

If you look at the HTML you can see it boils down to a <div> object of class:

dhx_cal_event_line

This is the class in the CSS we need to change.

First off, let’s test adding the CSS to round the corners, by adding the following CSS line right here (you’ll need to ensure you're on the Styles tab in the second row of tabs):

border-radius:20px;

And look at the bar to see if it’s changed:

Great! Now we know we’ve found the right CSS class, and the correct CSS property! However, we haven’t changed anything yet, we’ve only changed the CSS properties of that single bar. As soon as we refresh the page, it’ll be back to normal. Now we need to make the change to the CSS document.

Continuing in the browser, click across to the Sources tab, and find the CSS file.

Now we need to find the CSS class, and change the CSS. Any changes you make will be applied immediately. So we apply the change:

And check the bars to see if our change has taken:

No sale. That’s ok, sometimes this happens. CSS is cascading, meaning what we just tried isn’t compatible with a CSS property set further up the chain. We just need to add !important to the property value, this means it will override any inherited properties:

And check the bars:

Success!

The lesson here, if a CSS property doesn’t seem to be taking, try the !important directive.

However, once again, this will be reset when the page reloads, and the original CSS file is reloaded. But now we know what we need to change, and where to change it. So use Reactor to open the actual CSS document, by clicking the ‘edit’ icon in the list of files for the BlackBox.

Copy and paste the CSS from your web browser, save the file, and re-compile the BlackBox, by clicking the ‘compile’ button, either on the BlackBox screen, or the Preview screen.

Voila! Now the calendar shows rounded corners for the calendar appointments.

Part 2 - Turning a CSS Property Into a Parameter

Now you know how to change the CSS for a BlackBox. But how about if you wanted to give someone the ability to change the look and feel of this calendar without needing to do all the above? You could create a parameter for a BlackBox, to dynamically set a property at whatever the user wanted.

For example, you could give the BlackBox a parameter called event_bar_curve, and make some small modifications to the CSS to read in this value, and apply it to the appointment bars.

To start with, switch to the Functions tab in Reactor, add a new parameter for the xScheduler function and ensure it is set to ’Text’. This is because it’s not a field name for the BlackBox to read in from FileMaker, it’s simply a value to be handed over.

Open the main CSS file for this BlackBox, dhtmlxscheduler_flat.css.

Then find the the dhx_cal_event_line class and change/add the border-radius property like so:

The <?Reactor Reactor?> tags just tell Reactor to interpret everything within, which in this instance is simply a parameter name. This line will grab the event_bar-curve parameter, and by the time it makes it to the web-viewer, will take the place of the Reactor tags.

Now save the document and recompile. Run the BlackBox with the new parameter set.

Appointments are now curved according to the parameter provided

Mission accomplished! We can now set the box curve for an appointment bar at whatever we desire. 

This is only one parameter for one type of visual element. Any other changes you might desire are at your fingertips as well. Once you know the HTML element you’re targeting, and get a fairly basic understanding of CSS properties, you can make these changes extremely quickly, by switching back-and-forth between your CSS document (in your favourite code editor) and the BlackBox preview, recompiling as you go!

<— Reactor Home