...
A new Placeholder property has been added to the textarea properties pane. The Textarea control is the only input control that does not have a decorator.
Do not select a Textarea field as a Searchable Field if the amount of text stored in the field is greater than 32k.
Date, Time, Date/Time
The date control can be used in a form as a date, time or date plus time control. The Control Type property lets you select from a dropdown of choices: date, time or date/time. The designer can choose from a variety of formats for each type. Rules can be applied to the Date/Time control in all variations. See the Rules Examples chapter containing numerous examples and code samples.
...
Max size is the upper limit for each attachment uploaded to Upload controls in your forms/flow. The internal upper limit is controlled by a configuration parameter - frevvo.attachment.maxsize. In the
Frevvoproduct |
---|
Frevvoproduct |
---|
In-house, customers can control the
Frevvoproduct |
---|
...
The value in the user profile takes precedence over the configuration parameter. The value in the Max Size property for an Upload control takes precedence over the value in the Max Attachment Size field. All values must be entered in bytes and cannot exceed the max size configured on the server level. Refer to the Maximum Size for Attachments topic for more information.
Changing the file name of an uploaded attachment in the form/flow submission
...
The image shows an upload control in a form where jpg files for a koala bear and a jellyfish have been uploaded. Drag the Upload control from the Mapping Form Outline and drop it on the text field in your acroform. Viewing the pdf via the Form Viewer control, shows the koala bear image in the pdf.
Message Control
...
Type the text of your message into the textarea in the Message control properties pane. You can add HTML to format your message in this property as well or invoke the Rich Text Editor which will create the HTML for you.
...
For example, an Instruction section for users that has a bullet list, bolded text and an image can be quickly and easily created by adding the Message control to the section and applying the text stying and image features available in the Rich Text Editor.
Using the Rich Text Editor
...
- Select the feature from the toolbar first, then type your text. For example, to write in bold, click the button on the toolbar then type your text. Bolded characters display as you type.
- Select a portion or all of the text in the Editing area with your mouse then select the feature from the toolbar.
Tip | |
---|---|
|
Adding Custom Fonts to the Rich Text Editor
Custom fonts can be added to the list of fonts displayed in the Font dropdown of the Rich Text Editor. Refer to Using Custom Fonts in the Message Control for implementation details.
Exiting the Rich Text Editor
To exit the Rich Text editor in the designer, click the icon. Turn it off by sliding the toggle switch to the off position.
Frevvoproduct |
---|
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 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
Controls in your forms/flows that are dynamically populated can be included in the message text by using templates. The templates in the Message control are replaced with the values in these controls at runtime. For example, let's say you have a Product Order form with controls for the customer to select the product, color, size and select the option to include a gift card. When the order is complete, you want to display a message to the customer recapping the order. The image shows the control templates in the message text in the designer and the form at runtime. A business rule hides the Message control until the order is complete.
...
If your organization has special font requirements, custom fonts can be used to style text in the Message Control . The custom fonts must be available to to the HTML document containing the form. text. Typically custom fonts can be added dynamically with JavaScript. The exact JavaScript may will vary based on the font. Designers can use the Custom JavaScript feature to include the JavaScript required to dynamically load custom fonts.
There are two methods to use the available fonts in the Message Control. for enabling custom fonts:
- HTML markup OR
- In-house customers can add custom fonts to the font dropdown in the Rich Text Editor. This is optional.
HTML Markup
Follow these steps to use HTML markup:
...
Warning |
---|
Both methods described below require custom JavaScript to dynamically load custom fonts to Live Forms. The JavaScript varies based on the font. Contact the font vendor to obtain the exact JavaScript for your custom font(s). Use the Custom JavaScript feature to upload the JavaScript to each application or |
...
to your tenant |
...
. frevvo recommends uploading the JavaScript to the tenant so that it will be available to all designers and all applications.
|
HTML Markup
Follow these steps to use HTML markup:
Upload custom JavaScript to dynamically load custom fonts to each application or to your tenant.
Expand title Click here for an example of a tenant custom JavaScript when added to an application that will load the Google Roboto condensed font and the trial Century Schoolbook Roman font to Live Formsfonts. Code Block // frevvo custom JavaScript var CustomEventHandlersTenantCustomEventHandlers = { 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() { var trial = document.createElement('script'); trial.type = 'text/javascript'; trial.async = true; 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.getElementsByTagName("head")[0]; head.appendChild(trial); })(); this.fontsLoaded = true; } }, 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); } } }
- Drag and drop a Message Control into your form/flow.
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 style - Century Schoolbook Roman</h1> <h2 style="font-family:'Roboto', sans-serif">h2 style - Roboto</h2>
- Save and test your form/flow.
Note |
---|
If you choose to use the Message Control with a Script tag to load your custom JavaScript for custom fonts, you must add your code inside the Script tag then add the HTML after the Script tag. |
Adding Custom Fonts to the Rich Text Editor
If you want custom fonts to be available in the Message Control's Rich Text Editor, in-house customers can add the frevvo.message.rte.extra.fonts property to the <frevvo-home>\tomcat\conf frevvo-config.properties file .
Follow these steps:
The custom fonts must be available to the HTML document containing the form. Typically custom fonts can be added dynamically with JavaScript. The exact JavaScript may vary based on the font. You may have to contact the vendor for specific instructions when writing the script. Use the Custom JavaScript feature to include the JavaScript required to Upload custom JavaScript to dynamically load custom fonts to each application or on the tenant level.
Expand title Click here for an example of a tenant custom JavaScript that will to load the Google Roboto condensed font and the trial Century Schoolbook Roman font when added to a Live Forms applicationfonts. Code Block // frevvo custom JavaScript var CustomEventHandlersTenantCustomEventHandlers = { 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() { var trial = document.createElement('script'); trial.type = 'text/javascript'; trial.async = true; 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.getElementsByTagName("head")[0]; head.appendChild(trial); })(); this.fontsLoaded = true; } }, 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); } } }
- Stop
.Frevvoproduct - Navigate to <frevvo-home>\tomcat\conf.
- Edit the frevvo-config.properties file
- Add the frevvo.message.rte.extra.fonts property with a value listing the extra fonts in this format:
- Each font in the list is delimited by a semi-colon.
The font itself must be identified by its name in single quotes. Prefix the font name with an optional display name, if desired. Separate the display name from the font name by a forward slash. The display name is used in the font drop down of the Rich Text Editor. If the display name is not provided, the actual font name will be used.
Code Block title Example of the Configuration property for Custom Fonts frevvo.message.rte.extra.fonts=Century Schoolbook Roman/'Century Schoolbook Roman';Roboto/'Roboto', sans-serif
The font names and font type (sans-serif) on the right side of the equal sign in the example above came from the vendor. Contact the font vendor for the correct information for the custom font(s) that you are using.
- Each font in the list is delimited by a semi-colon.
- Save the file.
- Restart
.Frevvoproduct - Login as a designer user.
- Create/Edit an Application
- Create/Edit a Form
- Drag and Drop a Message control into your form.
- Enable the Rich Text Editor of the Message control by sliding the Rich Text toggle to the right.
- Click to show the Rich Text Editor menu
- Click on the Font dropdown in the toolbar.
Custom fonts are appended to the standard supported fonts.
...
Templates are allowed in the Link controls href/url property.
Save Value Property
Check the Save Value property to include the value of the Link control in the form/flow submission document. This property is unchecked (default) when you add new Link controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Link controls in Optional Sections.
...
Choose images that fit sensibly in your form before you upload it. The “regular” form size is 600px. You can resize an uploaded image by selecting the image control in the designer, clicking on the style tab in the properties panel and setting the width.
Save Value Property
Check the Save Value property to include the value of the Image control in the form/flow submission document. This property is unchecked (default) when you add new Images controls to your form/flow. Check the Save Value property if you are using the Image control in a template i.e.Print Headers/Footers in the form/flow PDF.
...
The Form Viewer Control is used to allow a generated PDF to be viewed as part of a form/flow. This control is visible in the Forms designer palette to be used when generating "Pixel Perfect" PDFs in the Forms designer. Refer to this documentation for the details..
Save Value Property
Check the Save Value property to include the value of the Form Viewer control in the form/flow submission document. This property is unchecked (default) when you add new Form Viewer controls to your form/flow. Refer to the Save value property topic for more information and to see how this property can help with Form Viewer controls in Optional Sections.
...