iOS Spinner v1.0.0
1 - Presentation & Features
This add-on based on the iOS progress spinner allows you to add a loading indication for the users of your FileMaker solutions during a procedure execution !
Simply made with a web viewer, it is possible to configure the web viewer completely independently with a simple copy and paste.
All you have to do is display the web viewer using the call script Spinner iOS - Show / Hide the spinner
at the start of the procedure, then hide the web viewer using the same script at the end of the procedure.
Features :
- Possibility to display or not the spinner
- Customization of the spinner color
- Customization of the waiting text
- Customize the size, color and position of the waiting text
- Customization of the position of the spinner container and the text in the web viewer
- Customization of the background color of the web viewer
- Possibility to add a background image to the web viewer
- No context needed
2 - Configuration / Parameters
2.1 Configuration
The add-on can work without any context thanks to using the global field IUD_SpinneriOS::gct_WV_FinalCode
.
- Copy and paste the web viewer containing the add-on calculation formula on the desired layout.
- Modify the parameters inside the web viewer's calculation.
- Integrate the showing and the hiding of the spinner by using the script
Spinner iOS - Show / Hide the spinner
.
Example of code associated with the web viewer :
Let (
[
_Spinner_Color = "#111111" ;
_Spinner_Size = "60" ;
_Text_Content = "Chargement…" ;
_Text_Color = "#111111" ;
_Text_Size = "1.5rem" ;
_Text_Weigh = "normal" ;
_Text_Position = "Bottom" ;
_Container_PositionX = "50%" ;
_Container_PositionY = "50%" ;
_BodyBackground_Color = "" ;
_BodyBackground_Picture = "" ;
_Img = Case ( not IsEmpty ( _BodyBackground_Picture ) ; " <img class='background_img' src='data:image/png;base64, "& Base64Encode ( _BodyBackground_Picture )&"' alt='' />"; "" );
_TextDiv = "<div class=\"text{{spinner_ClassSide}}\">{{spinner_Text}}</div>";
_DivTextBottom = Case ( _Text_Position = "Bottom" or _Text_Position = "Right" ; _textDiv ; "" ) ;
_DivTextTop = Case ( _Text_Position = "Top" or _Text_Position = "Left" ; _textDiv ; "" ) ;
_ClassSide = Case ( _Text_Position = "Left" or _Text_Position = "Right" ; "-side" ; "" ) ;
_Code = IUD_SpinneriOS::gct_WV_FinalCode ;
_FinalCode = Substitute (
_Code ;
[ "{{spinner_BackgroundColor}}" ; _BodyBackground_Color ] ;
[ "{{spinner_BackgroundImage}}" ; _img ] ;
[ "{{spinner_DivTextBottom}}" ; _divTextBottom ] ;
[ "{{spinner_DivTextTop}}" ; _divTextTop ] ;
[ "{{spinner_FontColor}}" ; _Text_Color ] ;
[ "{{spinner_FontSize}}" ; _Text_Size ] ;
[ "{{spinner_SpinnerColor}}" ; _Spinner_Color ] ;
[ "{{spinner_SpinnerSize}}" ; _Spinner_Size ] ;
[ "{{spinner_SpinnerPositionX}}" ; _Container_PositionX ] ;
[ "{{spinner_SpinnerPositionY}}" ; _Container_PositionY ] ;
[ "{{spinner_TextPosition}}" ; _Text_Position ] ;
[ "{{spinner_TextWeight}}" ; _Text_Weigh ] ;
[ "{{spinner_Text}}" ; _Text_Content ] ;
[ "{{spinner_ClassSide}}" ; _ClassSide ]
)
]
;
"data:text/html;charset=utf-8,¶" & _FinalCode
)
2.2 Parameters
Editable parameter values :
If you modify the names of the parameters, you will have to report your modifications to _FinalCode
if necessary
_Spinner_Color
: Define the Spinner's color. Hexadecimal value like "#FFFFFF" or with an existing CSS color name like "white"._Spinner_Size
: Define the Spinner's size. Integer._Text_Content
: Waiting's custom text. Text value._Text_Color
: Waiting's text color. Hexadecimal value like "#FFFFFF" or with an existing CSS color name like "white"._Text_Size
: Waiting's text size. Valid CSS value._Text_Weigh
: Waiting's text weigh. Valid CSS value._Text_Position
: Text's position relative to the spinner. Top / Right / Bottom / Left._Container_PositionX
: Container position on the X axis. Percent._Container_PositionY
: Container position on the Y axis. Percent._BodyBackground_Color
: Web viewer's background color. Hexadecimal value like "#FFFFFF" or with an existing css color name like "white" or empty._BodyBackground_Picture
: Use to add picture on the background.
Parameters not to be modified :
_Img
: variable containing the HTML tag<img>
the Base 64 code of_BodyBackground_Picture
._TextDiv
: variable containing the HTML tag<div>
with the text of_Text_Content
._DivTextBottom
: variable containing the HTML tag<div>
with the content of_TextDiv
if_Text_Position
is Bottom or Right._DivTextTop
: variable containing the HTML tag<div>
with the content of_TextDiv
if_Text_Position
is Top or Left._ClassSide
: variable adding a CSS Class to the spinner and the waiting text when_Text_Position
is Left or Right._code
: HTML code of the addon contained in the global fieldIUD_SpinneriOS::gct_WV_FinalCode
._finalCode
: Final HTML code of addon, value of_Code
with the replacement of previous parameters.
3 - Contents
3.1 - Tables
z_IUD_SPINNERIOS
: Table containing the definition of the add-on
3.2 - Scripts
Spinner iOS - Show / Hide the spinner
: Script called to show or hide the spinner's web viewer
5 - Compatibility
Operating systems :
- macOS Big Sur 11.0
- macOS Catalina 10.15
- macOS Mojave 10.14
- Windows 8.1 64-bit
- Windows 10 64-bit
FileMaker :
- Claris FileMaker Pro 19 or greater
- Claris FileMaker Go 19 or greater
6 - End User Licence Agreement
Important Note: Please read this EULA carefully. Downloading, installing, using or modifying this add-on signifies that the end user and their organization accept this EULA.
Definitions
- The add-on is Spinner iOS v1.0.0.
- The end user is the physical person who purchased the add-on on IU-DATA's website.
- The organization is the structure or the company for which the end user works.
- The household refers to the end user's family home.
Licence terms
IU-DATA authorizes the end user and his organization or household to use, modify, copy the add-on at their convenience. IU-DATA authorizes the end user and his organization to use for commercial purposes the add-on, when the add-on is an integral part of a solution whose spectrum of use is much wider than that defined by the functionalities of the add-on alone. On the other hand, IU-DATA does not authorize the end user and his organization to use for commercial or distribution purposes the add-on, modified or not as a final product.
The end user and his organization / household have free assistance for a period of 2 months from the date of purchase of this add-on, for any questions related to the use and configuration of this add-on.
Full access to FileMaker sources as well as to the source code used in the web viewer gives to the end user and his organization / household full control over modifying this add-on. It is therefore natural that we cannot intervene free of charge on the add-on whose code has been altered compared to the original version that IU-DATA delivered. Likewise, IU-DATA cannot be held responsible for any malfunction of any libraries mentioned in paragraph 4 - Dependencies, as well as malfunctions of the add-on following use on an operating system or a FileMaker platform other than those mentioned in paragraph 5 - Compatibilities.
Contact
For questions, please contact us : product@iu-data.com
7 - Credits
Creation and development :
- Julien Rouard from IU-DATA
Icon design :
- Christophe Gilet from Gilet Design
8 - Change Log
16/02/2021 - Spinner iOS v1.0.0 - 1st release