You are here:

AppStyles

The AppStyles object contains detailed properties for adjusting the embedded client application's appearance. It overrides the general "Theme" application style set in the embedOptions object - which is only light or dark.

Using the AppStyle Object

Constructors

There is NO constructor for the AppStyles object
AppStyles are made up of a collection of hierarchical properties (key-value pairs)

The AppStyles object is fully enumerated below. It can be supplied in a hierarchical format, or as a namespace delimited format (see examples below).

AppStyles does NOT change the styling of content, only the embed application itself. Content is styled using content themes.

You do NOT need to supply the entire object - as settings will be adjusted for those properties supplied only.

The AppStyles used in the content directly embedded is the same construct as used with the embedded Hub.

App Styles Object structure

global – global font styles and icons
contextMenu – context menu style and icons
smartInsights – smart insights dialog style
present – presentation specific styles, like the side menu
dialog – all pop-up dialog styles
chatbot – chatbot style

Nested Structure

The following code snippet shows the ENTIRE AppStyle structure with every property that can be set.

{
  "global": {
    "font": "",
    "icons": {
      "help": "",
      "close": "",
      "minimize": ""
    }
  },
  "contextMenu": {
    "background": "",
    "border": "",
    "borderRadius": "",
    "icons": {
      "menuItemArrowRight": "",
      "menuItemArrowLeft": ""
    },
    "separator": {
      "color": ""
    },
    "menuItem": {
      "color": "",
      "font": "",
      "hover": {
        "background": "",
        "color": ""
      },
      "icons": {
        "analyzeFurther": "",
        "bookmarks": "",
        "chatbot": "",
        "copyColumn": "",
        "copyContent": "",
        "copyDataPointValue": "",
        "copyHeaderValue": "",
        "copyMemberValue": "",
        "copyRow": "",
        "copySelections": "",
        "dataInteractions": "",
        "drillToLevel": "",
        "eliminate": "",
        "eliminateDataPoint": "",
        "exitFullscreen": "",
        "extendedOperations": "",
        "focus": "",
        "focusAndInteract": "",
        "focusDataPoint": "",
        "fullscreen": "",
        "information": "",
        "memberSelection": "",
        "modelAttribute": "",
        "modelDimension": "",
        "modelHierarchy": "",
        "modelLevel": "",
        "modelMember": "",
        "newBookmark": "",
        "pyramidActions": "",
        "quickCalc": "",
        "rating": "",
        "redo": "",
        "removeFromQuery": "",
        "rerunQueries": "",
        "reset": "",
        "runSlicers": "",
        "selectedMembers": "",
        "showConversation": "",
        "startConversation": "",
        "toggleMultiHighlightMode": "",
        "undo": "",
        "swap": "",
        "addToQuery": "",
        "dice": "",
        "resetQuery": "",
        "changeVisual": "",
        "odata": "",
        "printReport": "",
        "printReportPdf": "",
        "printReportPng": "",
        "printReportExcel": "",
        "printReportCsv": "",
        "conditionalFormatting": "",
        "pivot": "",
        "sortWizard": "",
        "copyRawData": "",
        "copyVisualData": "",
        "showRangeSlider": "",
        "copyOdataLink": "",
        "copyOdataLinkNoFilter": "",
        "copyOdataSnippet": "",
        "copyOdataSnippetNoFilters": "",
        "quickSort": "",
        "quickFilter": ""
      }
    }
  },
  "smartInsights": {
    "background": "",
    "contentSection": {
      "title": {
        "font": "",
        "color": ""
      },
      "measure": {
        "font": "",
        "color": ""
      },
      "value": {
        "font": "",
        "color": ""
      }
    },
    "icons": {
      "logo": ""
    }
  },
  "present": {
    "sideMenu": {
      "background": "",
      "color": "",
      "font": "",
      "border": "",
      "borderRadius": "",
      "boxShadow": "",
      "header": {
        "background": "",
        "color": "",
        "font": ""
      },
      "icons": {
        "rerunQueries": "",
        "multiHighlight": ""
      },
      "controls": {
        "toggle": {
          "on": {
            "background": ""
          },
          "off": {
            "background": ""
          }
        }
      }
    }
  },
  "dialog": {
    "borderRadius": "",
    "header": {
      "background": "",
      "color": "",
      "font": ""
    },
    "footer": {
      "background": "",
      "button": {
        "background": "",
        "color": "",
        "font": ""
      }
    }
  },
  "chatbot": {
    "background": "",
    "icons": {
      "reset": "",
      "clearMessages": "",
      "newQuery": "",
      "mute": "",
      "unmute": "",
      "logo": ""
    },
    "message": {
      "incoming": {
        "background": "",
        "font": "",
        "color": "",
        "border": "",
        "borderRadius": ""
      },
      "outgoing": {
        "background": "",
        "font": "",
        "color": "",
        "border": "",
        "borderRadius": ""
      },
      "userAvatar": {
        "background": "",
        "color": ""
      }
    },
    "input": {
      "font": "",
      "color": "",
      "icons": {
        "send": "",
        "startRecording": "",
        "stopRecording": "",
        "recordingNow": ""
      }
    }
  }
};

Flat vs Hierarchical

You can provide the object syntax hierarchically (as shown above), or flattened (see example below). When providing the flattened object, be sure to encase the keys in quotes.

Setting Properties

The following guide explains how to set the various types of properties. In general, they follow standard CSS rules.

To see specific examples for each property, see examples below.

Fonts

Set fonts using standard CSS font settings

font: 'bold 16px Roboto, sans-serif'

font: italic 12px "Fira Sans", serif

Background Colors

Set backgrounds using standard CSS HEX numbers, RGB or more complex background fills like gradients

background: "#f0f0f0"

background: hsla(30, 100%, 50%. 0.6)

background: rgba(34, 12, 64, 0.6)

Borders

Set border using standard CSS

border: "1px solid blue"

borderRadius: "5px"

borderRadius: "5px 0 3px 4px"

Shadows

Set shadows using standard CSS

shadow: "2px 2px 5px rgba(0,0,0,0.5)"

Icons

Set icons using standard CSS class names. The snippet below uses something like Font Awesome, which can be referenced on the host page.

bookmarks: 'fa-solid fa-question'

An alternative for icons is to use URLs or provide the raw image data in base64, exactly the same way one would through CSS.

bookmarks: 'url("custom-close-icon.png")'

logo: "url(https://example.com/chatbot-logo.png)",

bookmarks: 'url(data:image/png;base64,R0lGODl...)'

Font Awesome icons can be used by simply referencing the font awesome library in the host page. This approach will work with any 3rd party framework as well.

Examples

Mini Hierarchical AppStyle Example

This uses only a part of the appStyle settings ('global') and then injects it into the embed client object. These settings will overwrite the original 'light' theme. notice its also using Font awesome for icons.


const XappStyles = {
    global: {
        font: '0.8rem "Open Sans", sans-serif', // font shorthand property
        icons: {
            help: 'fa-solid fa-question', // icon class name
            close: 'url("custom-close-icon.png")', // icon url
            minimize: 'url(data:image/png;base64,R0lGODl...)', // icon base64 image
        },
    }
};
	
const embedClient = new PyramidEmbedClient('https://mysite.com/');
const container = document.getElementById('embed-container');

embedClient.embed(container, {
    contentId: 'ABCD756-e465-4f29-9390-bf0ef1df9e93',
	theme: "light",
    appStyles: XappStyles,
});

Full Hierarchical AppStyle Example

const appStyles = {
	global: {
		font: '0.8rem "Open Sans", sans-serif',
		icons: {
			help: "fa-solid fa-question",
			close: "url(custom-close-icon.png)",
			minimize:
				"url(data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=)",
		},
	},
	contextMenu: {
		background: "#FFFFFF",
		border: "1px solid blue",
		borderRadius: "5px",
		icons: {
			menuItemArrowRight: "fa-solid fa-angle-right",
			menuItemArrowLeft: "fa-solid fa-angle-left",
		},
		separator: {
			color: "#00a400",
		},
		menuItem: {
			color: "#333",
			font: "bold 14px Arial, sans-serif",
			hover: {
				background: "#f0f0f0",
				color: "#000",
			},
			icons: {
				analyzeFurther: "fa-solid fa-chart-line",
				bookmarks: "fa-regular fa-bookmark",
				chatbot: "fa-solid fa-robot",
				copyColumn: "fa-solid fa-copy",
				copyContent: "fa-solid fa-clipboard",
				copyDataPointValue: "fa-solid fa-database",
				copyHeaderValue: "fa-solid fa-heading",
				copyMemberValue: "fa-solid fa-user",
				copyRow: "fa-solid fa-table",
				copySelections: "fa-solid fa-check-double",
				dataInteractions: "fa-solid fa-exchange-alt",
				drillToLevel: "fa-solid fa-level-up-alt",
				eliminate: "fa-solid fa-trash",
				eliminateDataPoint:
					"fa-solid fa-filter-circle-xmark",
				exitFullscreen: "fa-solid fa-expand",
				extendedOperations: "fa-solid fa-cogs",
				focus: "fa-solid fa-bullseye",
				focusAndInteract: "fa-solid fa-arrows-alt",
				focusDataPoint: "fa-solid fa-crosshairs",
				fullscreen: "fa-solid fa-arrows-alt",
				information: "fa-solid fa-info-circle",
				memberSelection: "fa-solid fa-users",
				modelAttribute: "fa-solid fa-tag",
				modelDimension: "fa-solid fa-cube",
				modelHierarchy: "fa-solid fa-sitemap",
				modelLevel: "fa-solid fa-layer-group",
				modelMember: "fa-solid fa-user-tag",
				newBookmark: "fa-solid fa-bookmark",
				pyramidActions: "fa-solid fa-sort-amount-up",
				quickCalc: "fa-solid fa-calculator",
				rating: "fa-solid fa-star",
				redo: "fa-solid fa-redo",
				removeFromQuery: "fa-solid fa-times",
				rerunQueries: "fa-solid fa-sync",
				reset: "fa-solid fa-undo-alt",
				runSlicers: "fa-solid fa-play",
				selectedMembers: "fa-solid fa-check",
				showConversation: "fa-solid fa-comments",
				startConversation: "fa-solid fa-comment-dots",
				toggleMultiHighlightMode:
					"fa-solid fa-highlighter",
				undo: "fa-solid fa-undo",
				swap: "fa-solid fa-random",
				addToQuery: "fa-solid fa-plus",
				dice: "fa-solid fa-dice",
				resetQuery: "fa-solid fa-refresh",
				changeVisual: "fa-solid fa-palette",
				odata: "fa-solid fa-database",
				printReport: "fa-solid fa-file-pdf",
				printReportPdf: "fa-solid fa-file-pdf",
				printReportPng: "fa-solid fa-file-image",
				printReportExcel: "fa-solid fa-file-excel",
				printReportCsv: "fa-solid fa-file-csv",
				conditionalFormatting: "fa-solid fa-fill-drip",
				pivot: "fa-solid fa-table-columns",
				sortWizard: "fa-solid fa-sort",
				copyRawData: "fa-solid fa-copy",
				copyVisualData: "fa-solid fa-chart-bar",
				showRangeSlider: "fa-solid fa-sliders-h",
				copyOdataLink: "fa-solid fa-link",
				copyOdataLinkNoFilter: "fa-solid fa-unlink",
				copyOdataSnippet: "fa-solid fa-code",
				copyOdataSnippetNoFilters:
					"fa-solid fa-code-branch",
				quickSort: "fa-solid fa-sort-amount-down",
				quickFilter: "fa-solid fa-filter",
			},
		},
	},
	smartInsights: {
		background: "#f7f7f7",
		contentSection: {
			title: {
				font: "bold 16px Roboto, sans-serif",
				color: "#333",
			},
			measure: {
				font: "italic 14px Roboto, sans-serif",
				color: "#555",
			},
			value: {
				font: "bold 18px Roboto, sans-serif",
				color: "#000",
			},
		},
		icons: {
			logo: "url(https://example.com/logo.png)",
		},
	},
	present: {
		sideMenu: {
			background: "#222",
			color: "#FFF",
			font: "14px Arial, sans-serif",
			border: "1px solid #444",
			borderRadius: "8px",
			boxShadow: "2px 2px 5px rgba(0,0,0,0.5)",
			header: {
				background: "#111",
				color: "#FFF",
				font: "14px Arial, sans-serif",
			},
			icons: {
				rerunQueries: "fa-solid fa-sync",
				multiHighlight: "fa-solid fa-highlighter",
			},
			controls: {
				toggle: {
					on: {
						background: "#28a745",
					},
					off: {
						background: "#dc3545",
					},
				},
			},
		},
	},
	dialog: {
		borderRadius: "10px",
		header: {
			background: "#007bff",
			color: "#FFF",
			font: "bold 16px Arial, sans-serif",
		},
		footer: {
			background: "#f1f1f1",
			button: {
				background: "#007bff",
				color: "red",
				font: "14px Arial, sans-serif",
			},
		},
	},
	chatbot: {
		background: "#f8f9fa",
		icons: {
			reset: "fa-solid fa-undo",
			clearMessages: "fa-solid fa-trash-alt",
			newQuery: "fa-solid fa-search",
			mute: "fa-solid fa-volume-mute",
			unmute: "fa-solid fa-volume-up",
			logo: "url(https://example.com/chatbot-logo.png)",
		},
		message: {
			incoming: {
				background: "#e9ecef",
				font: "14px Verdana, sans-serif",
				color: "#333",
				border: "1px solid #ccc",
				borderRadius: "5px",
			},
			outgoing: {
				background: "#007bff",
				font: "14px Verdana, sans-serif",
				color: "#FFF",
				border: "1px solid #0056b3",
				borderRadius: "5px",
			},
			userAvatar: {
				background: "#007bff",
				color: "#FFF",
			},
		},
		input: {
			font: "14px Arial, sans-serif",
			color: "#000",
			icons: {
				send: "fa-solid fa-paper-plane",
				startRecording: "fa-solid fa-microphone",
				stopRecording: "fa-solid fa-microphone-slash",
				recordingNow: "fa-solid fa-circle-dot",
			},
		},
	},
};

Full Flat AppStyle Example

{
  "global.font": "0.8rem 'Open Sans', sans-serif",
  "global.icons.help": "fa-solid fa-question",
  "global.icons.close": "url(custom-close-icon.png)",
  "global.icons.minimize": "url(data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=)",
  "contextMenu.background": "#FFFFFF",
  "contextMenu.border": "1px solid blue",
  "contextMenu.borderRadius": "5px",
  "contextMenu.icons.menuItemArrowRight": "fa-solid fa-angle-right",
  "contextMenu.icons.menuItemArrowLeft": "fa-solid fa-angle-left",
  "contextMenu.separator.color": "#00a400",
  "contextMenu.menuItem.color": "#333",
  "contextMenu.menuItem.font": "bold 14px Arial, sans-serif",
  "contextMenu.menuItem.hover.background": "#f0f0f0",
  "contextMenu.menuItem.hover.color": "#000",
  "contextMenu.menuItem.icons.analyzeFurther": "fa-solid fa-chart-line",
  "contextMenu.menuItem.icons.bookmarks": "fa-regular fa-bookmark",
  "contextMenu.menuItem.icons.chatbot": "fa-solid fa-robot",
  "contextMenu.menuItem.icons.copyColumn": "fa-solid fa-copy",
  "contextMenu.menuItem.icons.copyContent": "fa-solid fa-clipboard",
  "contextMenu.menuItem.icons.copyDataPointValue": "fa-solid fa-database",
  "contextMenu.menuItem.icons.copyHeaderValue": "fa-solid fa-heading",
  "contextMenu.menuItem.icons.copyMemberValue": "fa-solid fa-user",
  "contextMenu.menuItem.icons.copyRow": "fa-solid fa-table",
  "contextMenu.menuItem.icons.copySelections": "fa-solid fa-check-double",
  "contextMenu.menuItem.icons.dataInteractions": "fa-solid fa-exchange-alt",
  "contextMenu.menuItem.icons.drillToLevel": "fa-solid fa-level-up-alt",
  "contextMenu.menuItem.icons.eliminate": "fa-solid fa-trash",
  "contextMenu.menuItem.icons.eliminateDataPoint": "fa-solid fa-filter-circle-xmark",
  "contextMenu.menuItem.icons.exitFullscreen": "fa-solid fa-expand",
  "contextMenu.menuItem.icons.extendedOperations": "fa-solid fa-cogs",
  "contextMenu.menuItem.icons.focus": "fa-solid fa-bullseye",
  "contextMenu.menuItem.icons.focusAndInteract": "fa-solid fa-arrows-alt",
  "contextMenu.menuItem.icons.focusDataPoint": "fa-solid fa-crosshairs",
  "contextMenu.menuItem.icons.fullscreen": "fa-solid fa-arrows-alt",
  "contextMenu.menuItem.icons.information": "fa-solid fa-info-circle",
  "contextMenu.menuItem.icons.memberSelection": "fa-solid fa-users",
  "smartInsights.background": "#f7f7f7",
  "smartInsights.contentSection.title.font": "bold 16px Roboto, sans-serif",
  "smartInsights.contentSection.title.color": "#333",
  "smartInsights.contentSection.measure.font": "italic 14px Roboto, sans-serif",
  "smartInsights.contentSection.measure.color": "#555",
  "smartInsights.contentSection.value.font": "bold 18px Roboto, sans-serif",
  "smartInsights.contentSection.value.color": "#000",
  "smartInsights.icons.logo": "url(https://example.com/logo.png)",
  "present.sideMenu.background": "#222",
  "present.sideMenu.color": "#FFF",
  "present.sideMenu.font": "14px Arial, sans-serif",
  "present.sideMenu.border": "1px solid #444",
  "present.sideMenu.borderRadius": "8px",
  "present.sideMenu.boxShadow": "2px 2px 5px rgba(0,0,0,0.5)",
  "present.sideMenu.header.background": "#111",
  "present.sideMenu.header.color": "#FFF",
  "present.sideMenu.header.font": "14px Arial, sans-serif",
  "present.sideMenu.icons.rerunQueries": "fa-solid fa-sync",
  "present.sideMenu.icons.multiHighlight": "fa-solid fa-highlighter",
  "present.sideMenu.controls.toggle.on.background": "#28a745",
  "present.sideMenu.controls.toggle.off.background": "#dc3545",
  "dialog.borderRadius": "10px",
  "dialog.header.background": "#007bff",
  "dialog.header.color": "#FFF",
  "dialog.header.font": "bold 16px Arial, sans-serif",
  "dialog.footer.background": "#f1f1f1",
  "dialog.footer.button.background": "#007bff",
  "dialog.footer.button.color": "red",
  "dialog.footer.button.font": "14px Arial, sans-serif",
  "chatbot.background": "#f8f9fa",
  "chatbot.icons.reset": "fa-solid fa-undo",
  "chatbot.icons.clearMessages": "fa-solid fa-trash-alt",
  "chatbot.icons.newQuery": "fa-solid fa-search",
  "chatbot.icons.mute": "fa-solid fa-volume-mute",
  "chatbot.icons.unmute": "fa-solid fa-volume-up",
  "chatbot.icons.logo": "url(https://example.com/chatbot-logo.png)",
  "chatbot.message.incoming.background": "#e9ecef",
  "chatbot.message.incoming.font": "14px Verdana, sans-serif",
  "chatbot.message.incoming.color": "#333",
  "chatbot.message.incoming.border": "1px solid #ccc",
  "chatbot.message.incoming.borderRadius": "5px",
  "chatbot.message.outgoing.background": "#007bff",
  "chatbot.message.outgoing.font": "14px Verdana, sans-serif",
  "chatbot.message.outgoing.color": "#FFF",
  "chatbot.message.outgoing.border": "1px solid #0056b3",
  "chatbot.message.outgoing.borderRadius": "5px",
  "chatbot.message.userAvatar.background": "#007bff",
  "chatbot.message.userAvatar.color": "#FFF",
  "chatbot.input.font": "14px Arial, sans-serif",
  "chatbot.input.color": "#000",
  "chatbot.input.icons.send": "fa-solid fa-paper-plane",
  "chatbot.input.icons.startRecording": "fa-solid fa-microphone",
  "chatbot.input.icons.stopRecording": "fa-solid fa-microphone-slash",
  "chatbot.input.icons.recordingNow": "fa-solid fa-circle-dot"
}

Feedback

Couldn't find what I was looking for

Help was confusing, unclear or incomplete

Instructions didn't work