IU-Data ColorPicker



1 - Presentation & Features

This add-on allows you to select a color and retrieve its code in hexadecimal format directly inside a FileMaker solution.

Simply made with a web viewer, it is possible to configure the web viewer completely independently with a simple copy and paste. Responsive, the size is determined by the size of the web viewer.

Features :

  • Select and get a hexadecimal color code
  • Use or not the transparency channel
  • Customization of the validation button
  • Customization of the background color
  • FileMaker script for interaction with the add-on
  • Responsive size
  • No context needed

This add-on uses the JavaScript libraries jQuery and bootstrap-colorpicker.js.

2 - Configuration / Parameters

2.1 Configuration

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

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

  2. Modify the _fieldName parameter in the web viewer calculation, to specify the field that will receive the color code.

  3. Modify the other parameters.

Example of code associated with the web viewer :

Let (
    [
        _fieldName = GetFieldName ( Table1::field1 ) ;
        _defaultColor = "#7731B2" ; 
        _alpha = 1 ; 
        _button_Label = "Validate" ; 
        _button_LabelColor = "" ;
        _button_Color = "#97CFC2" ;
        _body_BackgroundColor = "white" ;

        _code = IUD_ColorPicker::gct_WV_FinalCode;
        _finalCode = Substitute ( _code ; 
                ["{{colorPicker_fieldName}}" ; _fieldName ];
                ["{{colorPicker_defaultColor}}" ; _defaultColor ];
                ["{{colorPicker_backgroundColor}}" ; _body_BackgroundColor ];
                ["{{colorPicker_alpha}}" ; _alpha ];
                ["{{colorPicker_button_Label}}" ; _button_Label ];
                ["{{colorPicker_button_LabelColor}}" ; _button_LabelColor ];
                ["{{colorPicker_button_Color}}" ; _button_Color ]
        )
    ]
;
    "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

  • _fieldName : Name of the target field in which the selected color will be stored
  • _defaultColor : Default color to display in the ColorPicker in 6 or 8 bits hexadecimal format
  • _alpha : 1 / 0, allows the use of the transparency gauge
  • _button_Label : Text of the validation button
  • _button_LabelColor : Validation button text color
  • _button_Color : Color of validation button
  • _body_BackgroundColor : Web viewer background color

Parameters not to be modified :

  • _code : HTML code of the ColorPicker contained in the global field IUD_ColorPicker::gct_WV_FinalCode
  • _finalCode : Final HTML code of ColorPicker, value of _code with the replacement of previous parameters

3 - Contents

3.1 - Tables

  • z_IUD_COLORPICKER : Table containing the definition of the add-on

3.2 - Scripts

  • IUD_fmps_getColor : Script called from the web viewer to retrieve the color
  • JS - ColorPicker Perform Javascript in WebViewer : Web viewer control script

4 - Dependencies

jQuery v3.5.1
  • jquery_3.5.1.slim.min.js

https://code.jquery.com/jquery-3.5.1.slim.min.js

Bootstrap Colorpicker v3.2.0
  • bootstrap-colorpicker.js
  • bootstrap-colorpicker.min.css

https://itsjavi.com/bootstrap-colorpicker/

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

Please note that on FileMaker Go 19 the ColorPicker activation inside the web viewer require a double tap.

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 ColorPicker 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.

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 - Credits

Creation and development :

Icon design :

8 - Change Log

16/02/2021 - ColorPicker v1.0.0 - 1st release