Section | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
The Visibility setting determines who can see and use a form, and whether other
Frevvoproduct |
---|
When you select
Share from the Action Menu to share your form, you will see a Share Form page with share options at the right. Three options (Embedded Form, Full Page/Pop Up and Just the iframe) are different ways to let users submit the form from your website without having to navigate elsewhere. These options have associated code on the left which can be cut and pasted into your website. Specific instructions for the code also are provided.Warning |
---|
Be sure to select Share from the Action Menu to share your form/workflow or add it to a web page. Do not use the browser URL you see when you're running or testing a form — this URL represents an ''instance'' of the form, not the actual form itself.When you run or test a form, you'll notice that the browser URL includes a -extID parameter (for example, .../popupform?embed=true_extId=0.5427066243050674). This means that it's an in-memory instance of the form. You can use the _extID parameter yourself if you want to collaborate with others on an instance of a form. See the _extID topic for more information. |
The two Link options give you a link to the form/workflow. You can send the link in an email or publish it on your web page.
Each option is discussed below. The form's Access Control dictates it's visibility regardless of share options; if you want it to be public, be sure to select Who can start the form? = Anyone (login not required).
Frevvoproduct |
---|
Keep in mind that if you have shared your form via one of the link options and subsequently marked your form private, users will see an error message: "Access denied. Are you trying to access a private form/workflow?"
There may be cases where you want to provide a link back to the form inside the form itself. One example might be if you want to give users the option to open a form in a different language. The user opens the form, chooses a language, and sees a link to reload the form in that language. In this case, it's important to use the Raw Form/Workflow Link with the parameter resize=true. The raw form link opens in the original iframe. If you attempt to use the Email/Webpage link, the form will open in an iframe inside the original iframe, and result in issues such as inability to scroll through the form.
Usually your form/workflow's Access Control settings will determine its accessibility. If a form/workflow has the Who can Start the Form/Workflow? permission set to Authenticated Users (login required), for example, unauthenticated users will automatically be prompted to login to access it. However, there may be times you want to require a login before accessing a public form (Access Control for Who can Start the Form/Workflow set to Anyone (login not required). In that case, you can construct a share URL that uses the target-uri query parameter to send the user to the login page first.
Code Block |
---|
Cloud: https://app.frevvo.com:443/frevvo/web/login?target-uri=<form relative url> In House: https://<your server host>:<port>/<frevvo home>/web/login?target-uri=<form relative url> |
Replace the <form relative url> with your form's relative share url (just the part of the url starting with /frevvo/...).
Frevvoproduct |
---|
Frevvoproduct |
---|
The Opaque URL feature provides:
An example of the opaque URL for a
Frevvoproduct |
---|
Code Block |
---|
OLD SPACE URL: http(s)://<server>:<port>/frevvo/web/tn/mycompany/user/designer/space/mycompany NEW SPACE URL: http(s)://<server:port>/frevvo/web/tn/mycompany/u/8aa27da6-4bef-427c-92e3-6ad8d58e506a/space/mycompany |
The opaque URL can be used to determine the
Frevvoproduct |
---|
The "lookup" feature works with:
In all cases, follow these steps:
A user receives an email that includes an opaque URL to a form/workflow as shown below. The user reports an issue with the form/workflow and requests that the designer investigate. The designer must locate the
Frevvoproduct |
---|
Code Block |
---|
https://staging-app-72.frevvo.com:443/frevvo/web/tn/mycompany/u/8aa27da6-4bef-427c-92e3-6ad8d58e506a/app/_A_tLgAM1EeefQNjpl4JKNQ/formtype/_dyBXIKatEeaTw5HxBZKTQA/popupform |
Paste the opaque URL into your browser. Remove popupform from the URL and replace it with lookup after the slash.
Code Block |
---|
https://staging-app-72.frevvo.com:443/frevvo/web/tn/mycompany/u/8aa27da6-4bef-427c-92e3-6ad8d58e506a/app/_A_tLgAM1EeefQNjpl4JKNQ/formtype/_dyBXIKatEeaTw5HxBZKTQA/lookup |
Press the Enter key. Login to the tenant (determined by the tenant name after the /tn in the URL) as an admin, designer or publisher user if presented with the login screen.
The following information about the form/workflow display in the browser:
Code Block |
---|
Tenant: mycompany User: designer Project: HR Form: Invoice |
Excerpt | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
A designer must make changes to a form/workflow in their company space at the request of a co-worker. The requesting employee logs into the company space, selects the form/workflow from the menu and copies the form/workflow instance URL from the browser. An opaque URL such as the one shown below is emailed to the designer. The designer can't remember what user, app, form/workflow name that opaque url maps to and uses the lookup feature to find the form/workflow they need to fix/enhance.
Paste the opaque URL into your browser. Remove everything after the uuid. Replace it with lookup after the slash. Press the Enter key. Login to the tenant (determined by the tenant name after the /tn in the URL) as an admin, designer or publisher user if presented with the login screen.
The uuid is converted to the user id of the designer who owns the space.
Login to the tenant as the specified user and edit the space menu to get the raw form/workflow link. Remove everything after the formtype, flowtype, value in the opaque Raw Form/Workflow link. In the example shown, you would remove all characters starting with the question mark
Add /lookup to get the project and form/workflow name.
The workflow named Example 3 - PO for Sales Review is located in the tenant mycompany, in the designer user account, in the project Purchase Order Completed.
|
When you create a new form, by default it has Access Control marked as Anyone (no login required), meaning anyone that is given the form's URL via any of the form's share choices has access to use and submit the form. You may change it to Designer/Owner Only, so that the only person who can use the form via any of the form's share choices is the person logged into this
Frevvoproduct |
---|
It is important to note that while a logged in user is completing a form, the data from their session URL is visible to any session from the same user@tenant. For example, the user may copy and paste the session URL into a new browser tab where they are still logged in, which would load with the form data.
Frevvoproduct |
---|
Info | |
---|---|
Security enhancements in
|
Recent Safari updates have enhanced security features that prevent embedded content third party sites from loading inside another domain. These features help prevent sites from monitoring user's browsing activity, but they also impact frevvo forms embedded on your website when accessed via Safari browsers (and any other browser with similar security features.)
Expand | ||
---|---|---|
| ||
When users attempt to access your embedded form in Safari they will see a message prompting them to request access. They click Request Access, and see a popup window that can be closed. Return to the page with the embedded form. The message has now changed to prompt the user to Load Content. The user clicks Load Content, and may see a pop-up authorization from the browser. Click Allow in the browser pop-up, and the form will load. |
If your web server and
Frevvoproduct |
---|
Frevvoproduct |
---|
Code Block | ||
---|---|---|
| ||
<script xmlns="http://www.w3.org/1999/xhtml" src="http://localhost:8082/frevvo/web/tn/mycompany/u/a700f434-969e-432a-9779-655f9fc30259/app/_QDidgGGwEeeZjNWktbplXA/formtype/_ZL1mkIhDEeeRWfMSX8Dr0Q/embed?id=form1&container=false&resize=true" type="text/javascript"> </script> <script xmlns="http://www.w3.org/1999/xhtml" src="http://localhost:8082/frevvo/web/tn/mycompany/u/a700f434-969e-432a-9779-655f9fc30259/app/_QDidgGGwEeeZjNWktbplXA/formtype/_ZL1mkIhDEeeRWfMSX8Dr0Q/embed?id=form2&container=false&resize=true" type="text/javascript"> </script> |
Tip |
---|
If you experience problems with your web page not resizing correctly to accommodate multiple embedded forms, try setting the height of the form manually. Open the form in the Forms Designer, click the Style tab in the Properties panel, and and type a value in pixels (for example, ''720px'', ''900px'', etc.) in the Height field to set the form height. |
Currently
Frevvoproduct |
---|
Frevvoproduct |
---|
Frevvoproduct |
---|
For this version, embedding the task list successfully into an HTML page requires setting its width. See URL Parameters for more details.
By default, forms will display inside your web page in a frame. On mobile only, you can use the showLink URL parameter to display the form as a clickable link or thumbnail instead. The web master can customize the share link using the URL parameters described below.
If the iframe is not properly sized to the viewport on your mobile device, add the following meta tag between the <head> elements in the HTML.
Code Block |
---|
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> </head> |
Here is an example of HTML with the meta tag and embedded script:
Code Block |
---|
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> </head> <body> <div><p>Here is a div with some text. How long is this text? It should wrap around to the next line since it is a long enough line</p></div> <script xmlns="http://www.w3.org/1999/xhtml" src="http://<server>:<port>/frevvo/web/tn/frevvo.com/u/8aa27da6-4bef-427c-92e3-6ad8d58e506a/app/_bDd4YX76EduXFsA4l9RQeQ/formtype/_RwO0sMxjEeKp6swhthjzZQ/embed?container=false&center=false&resize=true&border=false" type="text/javascript"> </script> </body> </html> |
Another option is to leave the form in the frame. If no URL parameter is specified, the form will automatically resize based on the device it is viewed on. If the web designer wants the form to always be full-width, they can specify _device=desktop in the share embed URL. The web site designer might have a mobile web site where tablet and phone users would access the forms where the share URL would leave off the "_device=" parameter. www.frevvo.com is an example of forms embedded into a website that look great on all devices.