Customization - Styling & Theming

This option is used to hide the mobile header in the application. If this option is left unslected then the header can be viewed in the mobile application.

This option is used to add custom JS. On enabling this Custom JS Check box, JS button will be in turn enabled in the input grid.

Clicking on the JS button will open JS Editor with 3 default functions available namely, OnInputPageLoad(), OnOutputPageLoad(), OnBeforeSubmit().

• OnBeforeSubmit() : This function is called before the Input Form is submitted. The function returns false when your custom validation fails and will stay in the same page. The function returns true when your custom validation is success, and the Output page will be loaded.
• OnOutputPageLoad(): This function is called when the Output Page is loaded.
• OnInputPageLoad() : This function is called when Input Page is loaded.In the sample code un-commenting the last two lines will clear the input form when back button is pressed from the output form.

function OnInputPageLoad(event, data) 
{
// called when Input Page is loaded.
// 
// Clear page on Back;
// var prevPageID = $(data.prevPage).attr('id');
// if (prevPageID=='OutputPage') location.reload();
}
 
function OnOutputPageLoad(event, data)
{
// called when Ouput Page is loaded.
// var prevPageID = $(data.prevPage).attr('id');
// console.log(prevPageID);
}
 
function OnBeforeSubmit()
{
// called before the Input Form is submitted.
console.log("OnBeforeSubmit");
}

Other Events that are supported are,

• OnSectionExpand() is called when a section is expanded.

• OnSectionCollapse is called when a section is collapsed.

function OnSectionExpand(id) 
{
console.log($('#'+id).attr('cellname'));
console.log("Section Started");
}
 
function OnSectionCollapse(id) 
{
console.log($('#'+id).attr('cellname'));
console.log("OnSectionCollapse ");
}

You can theme your forms by selecting built in themes like,

• Default.
• Flat.
• Extended.
• Bootstrap.
• Square.
• NativeDroid Light.
• NativeDroid Dark.

Sample XLapp showing Native Droid Light

By default fonts , text colors and Background colors rendered in you excel app are automatically used when rendering output cells. To change this you can use CSS to modify the look and feel of almost any part of the page. You can enable “Custom Styling checkbox” this will enable a “CSS” Button in the input grid.

Clicking on this would open up the CSS editor where you can enter the Custom CSS.

You can now see the new Style applied to the Input Box.

Using this option we can set separate CSS for individual inputs.

This option is used to enable horizontal scroll with in the application when the number of input fields is more and the goes beyond the screen size.

To use custom themes you have to goto http://themeroller.jquerymobile.com/.

Select the “C” theme (tab on the left) on the Define the colors for the C layout and download the theme files. Upload these files to an a web server or you can host it in google drive. Get the URLs for the files and include it in the CSS styling box as follows.

</style> <!-- This is to close the default option -->
 
<link rel="stylesheet" href="http://myserver.com/css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="http://myserver.com/css/themes/jquery.mobile.icons.min.css" />
 
<style> <!-- This is to Start the default option -->

The above text will include the custom CSS definitions into the Input Form.

To use the C theme select the theme as C from the theme drop down.