badgeStack ( width ; height ; defaultArray ; badgeArray )

Generates overlapping circular badges with custom text and styles from JSON, rendered in SVG for display in a FileMaker Web Viewer.

Be the first to rate this function Log in to vote

Jonni™ - Show more from this author

Sample input:

badgeStack ( 400 ; 400 ; $defaultArray ; $pillArray )

Sample output:

Row of SVG badges for use in a webviewer

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

// BADGE STACK

// Generates a responsive SVG-based group of pill-shaped chips 
// from a JSON configuration, suitable for use in a Web Viewer.

// Function Name : badgeStack
// Parameters : width ; height ; defaultArray ; badgeArray
// Use example : badgeStack ( 400 ; 400 ; $defaultArray ; $pillArray )

// Note : See structure and syntax for defaultArray and badgeArray below


Let ( [

	~badgeArray = JSONGetElement ( badges ; "badge" )  ;
	~default = defaults ;
	
	~count = ValueCount ( JSONListKeys ( ~badgeArray ; "" ) ) ;
	
	// Defaults
	~radius = JSONGetElement ( ~default ; "radius" ) ;
	~diameter = ~radius * 2 ;
	
	~fontSize = JSONGetElement ( ~default ; "font.size" ) ;
	~fontWeight = JSONGetElement ( ~default ; "font.weight" ) ;
	~fontName = JSONGetElement ( ~default ; "font.name" ) ;
	
	~stroke = JSONGetElement ( ~default ; "border.stroke" ) ;
	~strokeColor = JSONGetElement ( ~default ; "border.color" ) ;
	
	~overlap = JSONGetElement ( ~default ; "spacing.overlap" ) ;
	~offset = ~diameter - ~overlap ;
	
	~backgroundColor = JSONGetElement ( ~default ; "background.fill" ) ;
	~backgroundRect = "<rect width='" & width & "' height='" & height & "' fill='" & ~backgroundColor & "' />" ;
	
	// Loop to generate badge SVGs in reverse order
	~badgeContent =
	
		While ( [
		
			~i = ~count - 1 ;
			~result = ""
		
		] ;
		
			~i ≥ 0 ;
		
		[
		
			~item = JSONGetElement ( ~badgeArray ; "[" & ~i & "]" ) ;
			~text = JSONGetElement ( ~item ; "text" ) ;
			
			~fill = JSONGetElement ( ~item ; "color.background" ) ;
			~textColor = JSONGetElement ( ~item ; "color.text" ) ;
			
			~x = ~i * ~offset + ~radius ;
			~y = ~radius ;
			
			~circle = "<circle cx='" & ~x & "' cy='" & ~y & "' r='" & ~radius & "' fill='" & ~fill & "' stroke='" & ~strokeColor & "' stroke-width='" & ~stroke & "' />" ;
			
			~label = "<text x='" & ~x & "' y='" & ( ~y + ( ~fontSize / 3 ) ) & "' text-anchor='middle' font-family='" & ~fontName & "' font-size='" & ~fontSize & "' font-weight='" & ~fontWeight & "' fill='" & ~textColor & "'>" & ~text & "</text>" ;
			
			~result = ~result & ¶ & ~circle & ~label ;
			
			~i = ~i - 1

		] ;
		
		~result
		
		) ;
		
		~svg =
		
		"<?xml version='1.0' encoding='UTF-8'?>" &
		"<svg xmlns='http://www.w3.org/2000/svg' width='" & width & "' height='" & height & "' viewBox='0 0 " & width & " " & height & "'>" &
		~backgroundRect &
		~badgeContent &
		"</svg>"
		
		] ;
		
		"data:image/svg+xml;utf8," & Substitute ( ~svg ; "¶" ; "" )

)

// This function produces a visually stacked row of circular badges using SVG, styled and controlled entirely via JSON. Each badge supports 
// individual text, background and font colour, and border styles, with layout dynamically handled based on Web Viewer dimensions. The leftmost 
// badge appears on top, enabling a clean and readable stack that’s perfect for representing users, tags, roles or assignments in FileMaker layouts.

// Default Array Example

//	JSONSetElement ( "" ; 
//	
//		[ "radius" ; 16 ; 2 ] ;
//		[ "font.size" ; 12 ; 2 ] ;
//		[ "font.weight" ; "bold" ; 1 ] ;
//		[ "font.name" ; "Helvetica Neue" ; 1 ] ;
//		[ "spacing.overlap" ; 6 ; 2 ] ;
//		[ "border.stroke" ; 2 ; 2 ] ;
//		[ "border.color" ; "#FFFFFF" ; 1 ] ;
//		[ "background.fill" ; "#FFFFFF" ; 1 ]
//	
//	)

// Badge Array Example

//	JSONSetElement ( "" ; 
//	
//		[ "badge[+]text" ; "MR" ; 1 ] ;
//		[ "badge[:]color.background" ; "#F4511E" ; 1 ] ;
//		[ "badge[:]color.text" ; "#FFFFFF" ; 1 ] ;
//	
//		[ "badge[+]text" ; "J" ; 1 ] ;
//		[ "badge[:]color.background" ; "#4285F4" ; 1 ] ;
//		[ "badge[:]color.text" ; "#FFFFFF" ; 1 ] 
//	
//	)


// GitHub : https://github.com/roxytheman/fmCustomFunctions/blob/50d010f9885f7ae18e5ad4327545e5ac5912a929/functions/pillCloud.fmfn
// BD Link : https://www.briandunning.com/cf/2804
// Written by: jonni@me.com
// V 1.0

This function produces a visually stacked row of circular badges using SVG, styled and controlled entirely via JSON. Each badge supports individual text, background and font colour, and border styles, with layout dynamically handled based on Web Viewer dimensions. The leftmost badge appears on top, enabling a clean and readable stack that’s perfect for representing users, tags, roles or assignments in FileMaker layouts.

Default Array Example

JSONSetElement ( "" ;

[ "radius" ; 16 ; 2 ] ;
[ "font.size" ; 12 ; 2 ] ;
[ "font.weight" ; "bold" ; 1 ] ;
[ "font.name" ; "Helvetica Neue" ; 1 ] ;
[ "spacing.overlap" ; 6 ; 2 ] ;
[ "border.stroke" ; 2 ; 2 ] ;
[ "border.color" ; "#FFFFFF" ; 1 ] ;
[ "background.fill" ; "#FFFFFF" ; 1 ]

)

Badge Array Example

JSONSetElement ( "" ;

[ "badge[+]text" ; "MR" ; 1 ] ;
[ "badge[:]color.background" ; "#F4511E" ; 1 ] ;
[ "badge[:]color.text" ; "#FFFFFF" ; 1 ] ;

[ "badge[+]text" ; "J" ; 1 ] ;
[ "badge[:]color.background" ; "#4285F4" ; 1 ] ;
[ "badge[:]color.text" ; "#FFFFFF" ; 1 ]

)

Comments

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

badgeStack ( width ; height ; defaultArray ; badgeArray )

Comments

Support this website.

Support this website.