This idea has been documented before, (Using a Web Viewer as a Field) but I rediscovered it myself recently and thought I might have something to add. As was pointed out in The Support Group article, sometimes as a developer, you want to display a long chunk of text (anything that requires scrolling within a field) to the user, but not allow them to edit that text. Some examples might include displaying a block of help text, or a long software agreement. It is obviously possible to format your text using HTML to achieve this effect, but that can become complicated especially if you are not that good at HTML. Fortunately FileMaker offers a much simpler way to display formatted text this using the GetAsCSS function.
I have prepared a FileMaker Pro file that demonstrates these three ideas:
- Use FileMaker formatted text instead of HTML with the GetAsCSS function
- Display a graphic in the Web Viewer using the Base64Encode function
- Display both text and graphic from layout objects (offscreen) without the need to create additional global fields
1. Web Viewer Displays Formatted Text
The obvious benefit from using a Web Viewer is that you get flowing text (note the scroll bar), without the ability for users to edit the text. Users can even select and copy and paste the text out of the Web Viewer.
Global Text Field stores the text to display
Use all FileMaker’s text editing options from the Formatting Bar
A script toggles the Formatting Bar on and off when the user clicks into the global text field, using a script trigger, OnObjectEnter and OnObjectExit.
FileMaker’s Format menu
It is possible to format the text using either FileMaker’s Format menu or from the Formatting Bar.
These formatting items work:
These ones don’t:
- Align Text
- Line Spacing
If you require alignment and line spacing, it might be time to switch to HTML to display your text.
The Magic: GetAsCSS Function in a Web Viewer
2. Add a graphic using Base64Encode function
In the second example in the demo file, some HTML formatting is used to display a global container field and the Base64Encode function (it could be a regular field). Note that in the HTML, the container width and height are obtained by using the GetContainerAttribute function and divide the results by a multiple to keep the image size smaller but still maintain the aspect ratio.
& “<center><img style=’display:block; width:”&
GetContainerAttribute ( Globals::gImage ; “width” )/1.5&”px;height:”
&GetContainerAttribute ( Globals::gImage ; “height” )/1.5&”px;’
id=’base64image’ src=’data:image/png;base64, ”
& Base64Encode ( Globals::gImage)
& GetAsCSS (Globals::gHelpText)
3. Offscreen Named Objects
Placing objects off screen, giving them a name, and the use of the GetLayoutObjectAttribute function, allows the display of these objects in a Web Viewer without the need to create any more global fields. The Base64Encode function displays the image in the Web Viewer.
This technique can be useful when you don’t want to create extra global fields in your database, or more significantly, populate those global fields on a live server database.
Challenges of this approach:
- More annoying to edit the text block (it keeps resizing)
- Remember to name it.
- Don’t delete the objects off the layout when you are cleaning up your database.
& “<center><img style=’display:block; width:”
&GetLayoutObjectAttribute ( “HelpScreenShot”; “width” )&”px;height:”
&GetLayoutObjectAttribute ( “HelpScreenShot”; “height” )&”px;’
id=’base64image’ src=’data:image/jpeg;base64, ”
& Base64Encode ( GetLayoutObjectAttribute ( “HelpScreenShot” ; “source” ))&”‘ /></center>”
& GetAsCSS (GetLayoutObjectAttribute ( “HelpNotes” ; “content” ))
Totally Unrelated Note: If you liked this post, check out my son’s new app GifTV for the Apple TV.