™ v5

Common Customizations

For the most common configuration customization tasks that every customer and OEM partner will want to consider see Installation Tasks. Also see the web.xml and frevvo.xml files for all of the customizable propertes.

API

The  Data API enables programmatic access to the all resources and data stored in the  server. The API provides a simple protocol for viewing and managing resources such as forms, applications, themes, schemas, etc. OEM partners as well as end user customers can use the API to extend the features and provide tigher integration with other applications.

You will need to install a client library in order to use the API.

Branding

VAR and OEM partners can brand Live Forms with their own company images and look. This is accomplished via  web application parameters.

Set Branding Parameters

The frevvo.war file contains a web.xml with branding parameters. In the frevvo-tomcat bundle, frevvo.war is located in: <frevvo-home>\tomcat\webapps - when the war file is unzipped to a temporary directory, the web.xml file will be found in <tmp>\WEB-INF.  Refer to Installation Tasks for the steps to repackage frevvo.war after parameters in web.xml have been editied.

For example, the parameter, frevvo.menu.bar,  if added to the web.xml file, prevents the menu bar from being rendered.  Any of the menu items (Downloads,Templates, Help, Docs, Forum, Contact) can be removed from the menu bar via configuration parameters in the web.xml or frevvo.xml files.  If all of the menu items are disabled, the menu bar should be removed.  

<context-param>
        <param-name>frevvo.menu.bar</param-name>
        <param-value>false</param-value>
        <description>Show menu bar. Set to false if all menu items are disabled</description>
</context-param>

Set branding parameters at container level

If you choose to brand at your web container level, note the web configuration changes at the container level take precedence over (override) those in the frevvo.war web.xml file. Again using Tomcat as an example:

• Open the file: <frevvo-home>\tomcat\conf\Catalina\localhost\frevvo.xml.
• Create a parameter with the same name as you see in frevvo.war's web.xml file. For instance, for the logo image:

<Parameter name="frevvo.logo.url" value="<url to your image>" override="false"/>

These are the brandable parameters and their defaults:

Branding External Urls 

Notice that several of the parameters use Url templates. For example, frevvo.help.url references a help file named designer.xsl that is part of frevvo.war and is located in the directory <frevvo-home>\WEB-INF\xsl\main\help after the war file has been unzipped . You may wish to bundle up a replacement help file and store your replacement file in that same directory. In that case you will keep the templates ${context.path}${servlet.path}/static that are part of the default path and append your own help file name. It can be an html file, myAppHelp.html. Or if your help is an external file you can replace the entire default value ${context.path}${servlet.path}/static/help/designer with a Url such has http://mycompany/myapp/help.html. Refer to Installation Tasks for the steps to repackage frevvo.war after parameters in designer.xsl have been editied.

Hiding Url Menu Items 

The frevvo.war file contains a web.xml with branding parameters. In the frevvo-tomcat bundle frevvo.war is located in: <frevvo-home>\frevvo\tomcat\webapps - when the war file is unzipped, the web.xml file will be found in <frevvo-home>\WEB-INF.  Refer to Installation Tasks for the steps to repackage frevvo.war after parameters in web.xml have been editied. Certain menu items are links to external Urls. Examples are Downloads, Forum, Docs etc. It is possible to completely remove any of these menu items by deleting the URL or setting the appropriate property. If no URL exists the menu item will be hidden.These paramters are found in the web.xml file. 

For example, if you want to hide the Downloads menu item:

<context-param>
        <param-name>frevvo.downloads.menu</param-name>
        <param-value>false</param-value>
        <description>No Downloads menu</description>
</context-param>

For example if you wish to hide the Docs menu item, edit the frevvo.docs.url and delete the content:

<context-param>
        <param-name>frevvo.docs.url</param-name>
        <param-value></param-value>
        <description>No URL set will hide the Docs menu and top link</description>
</context-param>

The look & feel of the Live Forms application is controlled via css. frevvo.css.url gives you the ability to add your own style sheet if you need to customize the look & feel of the page itself such as the background colors and sizes of the items on the pages. You can use a tool such as firebug to learn how the page is styled with css and thus how to override the default styling. 

Forms

The Powered by frevvo™ logo can be customized via the frevvo.poweredby.markup branding parameter. If this branding parameter is the empty string no logo will appear on any form. The logo can still be turned of on any given form via the Show Logo form property.Refer to Installation Tasks for the steps to repackage frevvo.war after parameters in web.xml have been edited

Hiding Palette Controls

The Live Forms designer can be customized by applying a custom theme. See the chapter on Customizing Themes for general information. 

For example, you can hide palette controls that you might not want your customers to use by adding the following css to form-edit.css. This can also be accomplished by editing configuration parameters in the web.xml or frevvo.xml files. See Configuring Palette Controls in the Designer for instructions.

/* Hide specific palette controls */
#palette .f-palette-list.Upload,
#palette .f-palette-list.Video{
display: none; 
}

Here are several other examples that hide various designer features:

/* Hide Data Source Section */
#documentTypes {
display: none !important; 
}
/* Hide Submit/Reset buttons */
.s-edit .f-submit.s-submit, .s-edit .f-submit.s-cancel {
display: none; 
}
/* Hide Rules Button*/
#e-edit-form, #e-rules-form {
/*display: none !important;*/
}

Hiding Form/Doc Action Wizards

The Live Forms designer form and doc action  buttons can be customized via the web.xml configuration file. Web.xml  is contained in the <frevvo-home>\tomcat\webapps frevvo.war. It is located in <frevvo-home>\WEB-INF\web.xml after the frevvo.war is unzipped to a temporary directory. Refer to Installation Tasks for the steps to unzip and repackage frevvo.war after parameters in web.xml have been edited. By default all wizards are visible in the form & doc action buttons page. To hide a wizard, remove it from the associated context parameter below.

<!-- Wizards -->
<context-param>
        <param-name>frevvo.formaction.wizards</param-name>
        <param-value>closePage,displayMessage,goToPage,goToPaypal,formPost,echoUsingGoogleDocument,createConfluencePage,mergeToConfluencePage</param-value>
        <description>Which form action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.erroraction.wizards</param-name>
        <param-value>displayErrorMessage,goToErrorPage</param-value>
        <description>Which error action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.docaction.wizards</param-name>
        <param-value>doNothing,emailDocumentDefault,docPost,emailDocumentGoogle,saveToPaperVision,saveToGoogleDocuments</param-value>
        <description>Which doc action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.docuri.wizards</param-name>
        <param-value>unsetDocUris,saveToGoogleSpreadsheets,manualDocUris</param-value>
        <description>Which doc uri wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.flows.formaction.wizards</param-name>
        <param-value>closePage,displayMessage,goToPage,formPost,createConfluencePage,mergeToConfluencePage</param-value>
        <description>Which form action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.flows.erroraction.wizards</param-name>
        <param-value>displayErrorMessage,goToErrorPage</param-value>
        <description>Which error action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.flows.docaction.wizards</param-name>
        <param-value>doNothing,emailDocumentDefault,docPost,saveToPaperVision,saveToGoogleDocuments</param-value>
        <description>Which doc action wizards are displayed</description>
</context-param>
<context-param>
        <param-name>frevvo.flows.docuri.wizards</param-name>
        <param-value>unsetDocUris,manualDocUris</param-value>
        <description>Which doc uri wizards are displayed</description>
</context-param>

Hiding Data Sources/Palette

Hiding Data Sources on the designer screen can be accomplished by adding the ?_method=post&edit=true and &showDS=false parameter to the edit link of a form.  Create the URL using the steps below:

Then copy and paste it in another tab of the browser. You have to add it to the Edit link, you cannot click Edit first and then add this parameter to the link that appears in your browser.

1. Click the Share icon  of a form on the Forms Home page and copy the "Raw Url" of the form into another tab of your broswer.
2. Add the "?_method=post&edit=true" parameter to the end of the link.
3. Add the "&showDS=false" parameter to hide Data Sources or "&showPalette=false" to hide the control palette.
4. When the form displays, either the Data Source section or the palette will be hidden.

Here are examples of the URl:

test.wlselb.frevvo.com/frevvo/web/tn/nancy.com/user/designer/app/_EVHJUIP-EeG1bcc-I8Sq_w/formtype/_cm3dAIP-EeG1bcc-I8Sq_w?_method=post&edit=true&showDS=false

test.wlselb.frevvo.com/frevvo/web/tn/nancy.com/user/designer/app/_EVHJUIP-EeG1bcc-I8Sq_w/formtype/_cm3dAIP-EeG1bcc-I8Sq_w?_method=post&edit=true&showPalette=false

Customizing the HTML Page Title Prefix

You can use the frevvo.page.title context parameter in the frevvo.xml file to  change the HTML prefixes of the titles of all Live Form pages. The Preview Page in the designer will display with value of the the frevvo.page. title  parameter  - <browser name>.  For example, to change the HTML page prefix to a company name, follow the steps below:

1. Ensure that  is not running.
2. Navigate to <frevvo-home>\tomcat\conf\catalina\localhost. Open the frevvo.xml with a text editor.
3. Add the information below to the frevvo war setting section of the file

<Parameter name="frevvo.page.title" value="Company Name" override="false"/>

      4. Save the file and restart .

Adding a Custom Button to the Designer Tool Bar

Adding a custom button to the  tool bar can be accomplished with the frevvo.form.edit.toolbar.buttons context parameter in the web.xml file. The value of the parameter is a JSON string that determines which buttons are visible in the toolbar. This context parameter is not optional - if it is not present there will be no buttons in the designer toolbar. 

Here is an example of how to edit the web.xml file to add the configuration parameter to add a custom Test Form button to the toolbar. The comment shows example JSON to add a new button. You can specify an id, a class and a title.  Be sure to rezip the frevvo.war file, as described above, when the changes are complete. 

<context-param>
		<param-name>frevvo.form.edit.toolbar.buttons</param-name>
		<param-value>{"buttons":[{"id":"e-preview-form"},{"id":"e-edit-form"},{"id":"e-rules-form"},{"id":"e-formactions-form"},{"id":"e-docactions-form"},{"id":"cancel-top"},{"id":"commit-top"}]}</param-value>
		<!--
		Example JSON to add a new toolbar button.
		<param-value>{"id":"e-test-form","class":"e-test-form e-toolbar-icon","title":"click to test the form"}</param-value>
		-->
		<description>Which edit mode toolbar buttons are rendered in the form designer</description>
</context-param>

This will generate something like this:

<a id="{id}" title="{title}" class="{class}" href="#" onclick="return CustomWizard.show('{id}');"></a>

CustomWizard.show(id) calls your code. Make sure it is defined. The FrevvoCustomActions, as shown below, is an example:

var CustomWizard = {
	show: function (id) {
		if (parent.FrevvoCustomActions)
			parent.FrevvoCustomActions.doAction (id);
		else if (FrevvoCustomActions)
			FrevvoCustomActions.doAction (id);
	}
}

Branding CSS

OEM partners can use the context parameter, frevvo.oem.branding.class to name a css class that will be placed onto the body of the  UI pages (form designer, etc.). Set the context parameter, frevvo.oem.branding.class  to oem in the web.xml file. The web.xml  file is located in <frevvo-home>\WEB-INF\web.xml after the <frevvo-home>\tomcat\webapps\frevvo.war file is unzipped to a temporary directory. Refer to Installation Tasks for the steps to unzip and repackage frevvo.war after parameters in web.xml and any other files have been edited.

<context-param>
 <param-name>frevvo.oem.branding.class</param-name>
 <param-value>oem</param-value>
 <description>This css class will be placed onto the body of the frevvo ui pages. OEMs can then create their own private CSS file(s) with rules based on the body having the oem branding class in order to customize the frevvo app.</description> 
</context-param>

CSS file(s) with rules based on the body having the oem branding class can be created in order to customize the  application. You can create css files from scratch or use the default oem-branding.css file as a guide. Any aspect of this file can be changed. The  oem-branding-.css file  is located in <\tmp>\css-XXXXX, where XXXXX=version number\themes\oem directory of the unzipped WAR. 

OEM partners are responsible for creating the CSS file(s) and putting them into the WAR file. To do this, edit <\tmp>\css-XXXXX\form.pac.css (in the exploded WAR) and add one or more lines like the following:

@IMPORT url(“oem_branding.css”); where oem_branding.css is the name of the css file containing the specific oem rules. XXXXX = the  version number.

.