Developer Panel

From Flux Developer Portal

A special page called “Developer Pane” is where all aggregated information about all customizable elements are gathered. In the developer pane, you can access the Master Page, push static content live, and enable preview mode.

Customizing the Master Page

The Master Page is the global container for every page on the site. So, markup stored in the master page will appear on all pages of your community. The master page is generally used to place ad banners at the top or at the bottom of the page, and apply navigation menu, quick menu or other elements that you would like to appear on each page within your community. Each community can have only 1 Master Page.

When you clickon the Edit link, a sliding text area will open to allow you to customize markup on the master page in Preview Mode (you cannot customize markup of master page in Live Mode – you can only customize one of Preview Mode and then deploy it to make it affect Live Mode). In the text area you should specify FML markup for your master page.

Adding an HTML <FORM> to the Master Page template

Although it's not obvious by looking at the Master Page template code in your Community Manager, the entire page is wrapped in a single HTML <FORM>. This is a requirement imposed by the ASP.NET framework upon which the flux platform is built. If you want to add your own <FORM> to the Master Page template (ie, to add a site search form to the header), you cannot just add a <FORM> tag. Doing so will result in a nested form, which is not allowed in HTML. Since the Master Page is enclosed in a <FORM> tag already, you can simply add your form elements (<INPUT> fields and buttons) directly to the page without surrounding them in your own <FORM> tag. Since you're not adding your own <FORM> tag, you can't specify the ACTION of the form. This means that you can't control what happens when a SUBMIT button is clicked. Instead, use a button with an onClick event handler. Here's an example of adding a Google search form to the Master Page template:

The only caveat is to make sure to choose a name for your <INPUT> fields that wont clash with other <INPUT> fields which may appear on the page.

Click here for more detailed information about the Master Page.

Using Preview Mode

• Preview Version – displays a version number for the markup used to render master page while in Preview Mode.
• Live Version – displays a version number for the markup used to render master page while in Live Mode (what visitors actually see).

Both these numbers are for your convenience to track how far away the markup of Preview Mode is from the markup of Live Mode. If the two numbers are equal, that means the same markup version is being used in Preview Mode and in Live Mode. If Preview Version number is greater than Live Version number that means Preview version of markup contains some differences, when compared to Live, and serves as a reminder that while you are in Preview Mode you might see your pages differently than regular visitors, who always see the Live markup version.

• Last Deployed On – displays a timestamp of when you last updated the markup of Live Mode.
• Last Saved On – displays a timestamp of when you last updated the markup of Preview Mode.

Both these timestamps are for your convenience to recall when you last updated Preview or Live version of markup.

Static Content

Static content refers to all assets you might have to customize for your community site: images, Jscripts, CSS files, Flash files, etc. You can take the following actions on static content:

• Copy Live to Preview (Sync) – this action copies all static resources from Live Mode to Preview Mode. This means that all static images, Jscripts, CSS files, Flash files, etc. that are used on the site in Live Mode will be copied into Preview Mode and thus will be used also in Preview Mode. This action makes sense when you want to synchronize your Live and Preview Mode before you start to modify static resources in Preview Mode.
• Deploy to Live, No Theme and Deploy to Live, Include Theme – these actions allow you to copy all static resources from Preview Mode to Live Mode. These actions should be performed when you have completed tweaking UI or client‐side behavior of your community (via Preview Mode) and are ready to push your changes to Live Mode and start using those new static resources on your community website.

There is the following difference between those two actions: Your community theme is considered a static resource, as it is a CSS file which is generated via the Community Theme page. You may decide whether the community theme should be applied along with all the rest of the static resources while copying them from Preview to Live (Deploy to Live, Include Theme action) or not (Deploy to Live, No Theme action). In other words, if you click Deploy to Live, No Theme, all resources will be copied excluding the .css file associated with your Community theme. This feature might be used when you have finished tweaking pages with static content (images, Jscripts, Flash files etc.) but still not finished setting up community theme. In this case, it makes sense to deploy everything except that unfinished piece, which you can return to later for completion. On the other hand, if you will click Deploy to Live, Include Theme everything, including community theme .css, will be copied, and visible to community visitors.