IU-DATA

#Spinner 4 Borders v1.0.0

1 - Presentation & features

This add-on allows you to add a loading indication with a bunch of parameters for the users of your FileMaker solutions during a process 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 4 Borders - Show / Hide the spinner at the start of the process, then hide the web viewer using the same script at the end of the process.

Features :

2 - Installation / Configuration / Parameters

2.1 Installation

  1. Close FileMaker Pro

  2. Copy the folder IUD_Spinner4Borders_v1_AddOn to the following directory :

     - macOs : ~/Library/Application Support/FileMaker/Extensions/AddonModules/
 - Windows : AppData\Local\FileMaker\Extensions\AddonModules\

  3. In FileMaker Pro, open the solution on which you want to add the Add-On.

  4. In layout mode, open the left side panel on the Add-ons tab, click on the button add   .

  5. Under the IU-DATA category, select Spinner 4 Borders then click on Choose   .

  6. Drag and drop the Spinner 4 Borders add-on on the layout where you want to add-it.

2.1 Configuration

The add-on can work without any context thanks by using the global field IUD_Spinner4Borders::gct_WV_FinalCode.

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

  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 4 Borders - Show / Hide the spinner.

Example of code associated with the web viewer :

Let ( 
[
_Spinner_BorderTopColor = "#97CFC2" ;
_Spinner_BorderRightColor = "" ;
_Spinner_BorderBottomColor = "#D9E13A" ;
_Spinner_BorderLeftColor = "" ;
_Spinner_InactivColor = "#F3F3F3" ;

_Spinner_Size = 20 ;
_Spinner_BorderSize = 3 ;
_Spinner_Speed = 1 ;

_Text_Content = "Loading..." ;
_Text_Color = "#97CFC2" ;
_Text_Size = "1.2rem" ;
_Text_Weigh = "normal" ;
_Text_Position = "Right" ;

_Container_PositionX = "50%" ;
_Container_PositionY = "50%" ;

_Body_BackgroundColor = "" ;
_Body_BackgroundPicture = "" ;

_Img = Case ( not IsEmpty ( _Body_BackgroundPicture ) ; "     <img class='background_img' src='data:image/png;base64, "& Base64Encode ( _Body_BackgroundPicture )&"' 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" ; "" ) ;

_BorderTop = Case ( not IsEmpty ( _Spinner_BorderTopColor ) ; "{{Spinner_BorderSize}}px solid " & _Spinner_BorderTopColor ; "''" );
_BorderBottom = Case ( not IsEmpty ( _Spinner_BorderBottomColor ) ; "{{Spinner_BorderSize}}px solid " & _Spinner_BorderBottomColor ; "''" );
_BorderLeft = Case ( not IsEmpty ( _Spinner_BorderLeftColor ) ; "{{Spinner_BorderSize}}px solid " & _Spinner_BorderLeftColor ; "''" );
_BorderRight = Case ( not IsEmpty ( _Spinner_BorderRightColor ) ; "{{Spinner_BorderSize}}px solid " & _Spinner_BorderRightColor ; "''" );

_Code = IUD_Spinner4Borders::gct_WV_FinalCode ;

_FinalCode = Substitute (
               _Code ; 
               [ "{{Spinner_BackgroundColor}}" ; _Body_BackgroundColor ] ;
               [ "{{Spinner_BackgroundImage}}" ; _img ] ;

               [ "{{Spinner_DivTextBottom}}" ; _divTextBottom ] ;
               [ "{{Spinner_DivTextTop}}" ; _divTextTop ] ;

               [ "{{Spinner_BorderTop}}" ; _BorderTop ] ;
               [ "{{Spinner_BorderBottom}}" ; _BorderBottom ] ;
               [ "{{Spinner_BorderLeft}}" ; _BorderLeft ] ;
               [ "{{Spinner_BorderRight}}" ; _BorderRight ];
               [ "{{Spinner_InactivColor}}" ; _Spinner_InactivColor ] ;

               [ "{{Spinner_Size}}" ; _Spinner_Size ] ;
               [ "{{Spinner_BorderSize}}" ; _Spinner_BorderSize ] ;
               [ "{{Spinner_Speed}}" ; _Spinner_Speed ] ;

               [ "{{Spinner_PositionX}}" ; _Container_PositionX ] ;
               [ "{{Spinner_PositionY}}" ; _Container_PositionY ] ;

               [ "{{Spinner_DivTextBottom}}" ; _DivTextBottom ] ;
               [ "{{Spinner_DivTextTop}}" ; _DivTextTop ] ;
               [ "{{Spinner_FontColor}}" ; _Text_Color ] ;
               [ "{{Spinner_FontSize}}" ; _Text_Size ] ;
               [ "{{Spinner_TextPosition}}" ; _Text_Position ] ;
               [ "{{Spinner_TextWeigh}}" ; _Text_Weigh ] ;
               [ "{{Spinner_Text}}" ; _Text_Content ] ;
               [ "{{Spinner_ClassSide}}" ; _ClassSide ]

 
            )
]
;
"data:text/html;charset=utf-8,¶" & _FinalCode
)

Please note : If your database on which you want to install the add-on is hosted with FileMaker Server. You might need to refresh the globale calculation field IUD_Spinner4Borders::gct_WV_FinalCode. Otherwise the webviewer that contains the add-on will remain empty. To refresh this field, you can set the field IUD_Spinner4Borders::WV_HTML by it's own value inside a script that is launch at the start of your application.

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

⚠️   Parameters not to be modified :

3 - Tables / Scripts / Custom functions / Value lists

3.1 - Tables

3.2 - Scripts

3.3 - Custom functions

No custom functions in this add-on.

3.4 - Value lists

No value lists in this add-on.

4 - Dependencies

No dependencie in this add-on.

5 - Compatibilities

Operating systems :

Plateforms :

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 :

Contract 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 any questions, please contact us to this address: product@iu-data.com

7 - Realization

Creation and development :

Icon design :

8 - Change Log

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


© IU-DATA 2021