Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Tip
  • If you are using the Chrome browser, you must type the text, select it and then click the menu option.
  • You can include (copy/paste) special characters that get encoded as special entity references in the text of the Message control, Examples of these special characters are left and right quotes etc...
    Frevvoproduct
    forces special non-ascii entities to be encoded numerically. Check this website for the list of known entity references.
Using custom fonts in the Message Control markup

...

Adding Custom Fonts to the Rich Text Editor

In-house customers can add custom fonts to the font dropdown in the Rich Text Editor .  

Follow these steps to use custom fonts via HTML markup:

...

titleClick here for an example of custom JavaScript when added to an application that will load the Google Roboto condensed font and the trial Century Schoolbook Roman font to Live Forms

...

by adding the frevvo.message.rte.extra.fonts property to the <frevvo-home>\tomcat\conf\frevvo-config.properties file. Refer to Customizing Fonts in the Message Control Rich Text Editor for the details. Simply highlight your text then select the font from the fonts dropdown.

Image Added

Exiting the Rich Text Editor

To exit the Rich Text editor in the designer, click the Image Added icon. Turn it off by sliding the Image Addedtoggle switch to the off position.

Frevvoproduct
remembers the Rich Text Editor mode when your form/flow was saved and it display it in that mode the next time the form/flow is opened for editing.

When you click away form the Message control you can get an idea of how it will look to your users. Of course, you can always click the Image Added Preview form icon to see how your form displays.

Save Value Property

Check the Save Value property to include the value of the Message control in the form/flow submission document. This property is unchecked (default) when you add new Message controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Message controls in Optional Sections.

Using Templates in a Message Control

Using custom fonts in the Message Control markup

Custom fonts can be used to style text in the Message Control markup. In-house customers can add custom fonts to the font dropdown in the Rich Text Editor.  

Follow these steps to use custom fonts via HTML markup:

  1. Upload custom JavaScript to dynamically load custom fonts to each application or on the tenant level so that it will be available to all designers. The custom JavaScript will vary depending on the fonts that you are using. You may have to contact the vendor for specific instructions when writing the script.

    Expand
    titleClick here for an example of custom JavaScript when added to an application that will load the Google Roboto condensed font and the trial Century Schoolbook Roman font to Live Forms
    Code Block
    // frevvo custom JavaScript
    
    var CustomEventHandlers = {
    	fontsLoaded: false,
    	setup: function (el) {
    		if (!this.fontsLoaded) {
    
    			// Load Roboto Condensed font
    			this.addStyleSheetToDoc("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");			
    
    			// Load trial Century Schoolbook.  The following js was generated by myfonts using the
    			// free trial option.  With this you can put markup in message controls like the following:
    			// <h1 style="font-family: 'Century Schoolbook Roman';">Header looks great</h1>
    
    			(function() {
    		        if (ss[i].href == href)
    var trial = document.createElement('script');
    		         trial.type   return= 'text/javascript';
    		        }trial.async = true;
    				
    		if (document.createStyleSheet) {
    			document.createStyleSheet(href);
    		} else {
    			var l        trial.src = 'https://easy.myfonts.net/v2/js?sid=42(font-family=Century+Schoolbook+Roman)&sid=44(font-family=Century+Schoolbook+Bold)&key=CwN4ZsXpUs';
    		        var head = document.createElementgetElementsByTagName("linkhead")[0];
    			l.rel = "stylesheet"; 			l.href = href    head.appendChild(trial);
    			document.getElementsByTagName("head")[0].appendChild(l    })();
    		}    this.fontsLoaded = true;
    		}
    }
  2. Drag and drop a Message Control into your form/flow.
  3. Add the markup and text to the Message property. Since all fonts are different, you may need to contact the vendor for instructions to include the font in your HTML

    Code Block
    <h1 style="font-family: 'Century Schoolbook Roman';">h1-Century Schoolbook Roman</h1>
    <h2 style="font-family:'Roboto', sans-serif">h2 - Roboto</h2>
  4. Save and test your form/flow.

Image Removed

Adding Custom Fonts to the Rich Text Editor

In-house customers can add custom fonts to the font dropdown in the Rich Text Editor by adding the frevvo.message.rte.extra.fonts property to the <frevvo-home>\tomcat\conf\frevvo-config.properties file. Refer to Customizing Fonts in the Message Control Rich Text Editor for the details. Simply highlight your text then select the font from the fonts dropdown.

Image Removed

Exiting the Rich Text Editor

To exit the Rich Text editor in the designer, click the Image Removed icon. Turn it off by sliding the Image Removedtoggle switch to the off position.

Frevvoproduct
remembers the Rich Text Editor mode when your form/flow was saved and it display it in that mode the next time the form/flow is opened for editing.

When you click away form the Message control you can get an idea of how it will look to your users. Of course, you can always click the Image Removed Preview form icon to see how your form displays.

Save Value Property

Check the Save Value property to include the value of the Message control in the form/flow submission document. This property is unchecked (default) when you add new Message controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Message controls in Optional Sections.

Using Templates in a Message Control

...

  1. 	},
    	addStyleSheetToDoc: function (href) {
    				
    		// don't load it again if it's already there
    		var ss = document.styleSheets;
    	    for (var i = 0, max = ss.length; i < max; i++) {
    	        if (ss[i].href == href)
    	            return;
    	    }
    				
    		if (document.createStyleSheet) {
    			document.createStyleSheet(href);
    		} else {
    			var l = document.createElement("link");
    			l.rel = "stylesheet";
    			l.href = href;
    			document.getElementsByTagName("head")[0].appendChild(l);
    		}
    	}
    }
  2. Drag and drop a Message Control into your form/flow.
  3. Add the markup and text to the Message property. Since all fonts are different, you may need to contact the vendor for instructions to include the font in your HTML

    Code Block
    <h1 style="font-family: 'Century Schoolbook Roman';">h1-Century Schoolbook Roman</h1>
    <h2 style="font-family:'Roboto', sans-serif">h2 - Roboto</h2>
  4. Save and test your form/flow.

Image Added

...