3.2 - Configuring Your answerSpace

Configuration:

The options between BIC2 and BIC3 can be slightly different, and so below you’ll notice some settings are specific to a BIC version.

BIC3 Version:

If you’ve selected BIC3, the first thing you should do is select your BICv3 Version.

BIC3 is more modular than BIC2, meaning at BlinkMobile we’re able to deploy updates to the BIC and Forms, from which you can simply choose the version you wish to use. This means everyone isn’t forced to take the update at the same time.

From the select box you will notice full versions - these are the stable releases. There will be “Testing” versions, which is the latest version of BIC3, and is currently available for testing.

The “Deprecated” versions are older versions that have been deprecated by newer versions - it’s not recommended you use these versions, as they may contain bugs. We routinely remove these old versions once our systems tell us no one is using these older versions.

Using a Home Interaction:

The Home interaction is the interaction your users will see when they first open the app. At this point, you probably haven’t created any interactions, so you can skip this part for now. Later, once you’ve designed your home interaction or landing interaction, return here, set “Use Home Interaction” to true, and select the interaction you wish to use from the “Home Interaction” select box.

Look and Feel:

This will be different depending on whether you're using BIC2 or BIC3.

BIC3:

In BIC3, these are jQueryMobile specific settings. Here you can set the default page transition, and upload a Themeroller theme pack (optional).

Themeroller is a way to create a template colour scheme, and can be generated and downloaded from the Themeroller website:

https://themeroller.jquerymobile.com/

Using Themeroller:

Ensure you choose jQueryMobile version 1.3.2. Once you have created the theme, you can export the ZIP. Unzip the file you downloaded, and inside you will find images and a CSS style sheet.

Open the CSS file (the full version, not minified), and do a search and replace to replace the “images/” string with nothing. This is required as the asset manager (where we’re about to upload these theme files) is a flat structure, and does not have the concept of sub folders.

Next, go to the Manage menu in your Interaction Manager, and select Assets. The Assets Manager is a CDN that will allow you to upload static files. Upload your Themeroller CSS file, plus all of the images that were included in the “images” folder you just unzipped.

Lastly, on the answerSpace Settings page you can now choose your themeroller CSS file from the Themeroller option.

BIC2:

If you’re using BIC2, in the Look and Feel section you will be able to upload an icon (favicon), plus a logo image that will be automatically displayed in the app header for you, plus set some common CSS styles for things like background colors, and odd/even row styles.

While this gives you easy access to specific parts of the app, please keep in mind that you may wish to use either an external CSS file or custom CSS styles which we’ll cover shorty.

Header, Footer, and Sidebar:

Again, this will be different depending on whether you're using BIC2 or BIC3.

BIC3:

For BIC3, you can paste jQueryMobile header code here. This is often a header bar of some kind with navigation options, plus slide out side-menu options too.

You can copy and paste examples from the jQueryMobile website:

http://demos.jquerymobile.com/1.3.2/widgets/headers/

BIC2:

For BIC2 you are able to set an intro message, which is only ever displayed on the front page of your answerSpace, as well as customise some of your header and footer options, and add footer HTML code.

Keep in mind that your header is generated automatically by the platform for BIC2, which is why you don’t have a Header HTML Code box for BIC2 anwerSpaces.
Advanced:
The Advanced section is where you’ll do most of your styling, plus include Javascript files.

Stylesheet:

The Stylesheet box is where you can write or paste your CSS styles. This is compaibtly with CSS3 and Media Queries.

You can either edit the text in the box directly, or click the Edit button to open the Stylesheet into a full screen code editor box.

Load External Javascript:

Here you’re able to enter URLs to remotely hosted Javascript files. These are often remotely hosted APIs, such as Google Maps, or could be self-hosted Javascript files that you’re managing seperately.

Load External CSS:

Here you’re able to enter URLs to remotely hosted CSS files. These are often remotely hosted fonts or font icons, such as Google Fonts or Font Awesome.

Next: