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.

  1. Copy and paste the web viewer containing the add-on calculation formula on the desired layout.

  2. Modify the parameters inside the web viewer's calculation.

  3. 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 field IUD_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 : [email protected]

7 - Credits

Creation and development :

Icon design :

8 - Change Log

16/02/2021 - Spinner iOS v1.0.0 - 1st release