Skip to main content

Technical Documentation

Icon Menu Builder

Contents

Icon Menu Builder v2

StartScreen

'Loading Screen'

OnStart

///////////////////////////////////////////////////////////////////////////////////////
// //
// Place your own App.OnStart code after the FOOTER at the bottom of this code. //
// I DO NOT recommend loading any data during the App OnStart, this should be //
// done during the loading screen, so that the user is IN the App and visually //
// engaged so that their attention is kept. //
// //
// Additionally, with 'Non-blocking OnStart' moving out of preview in the future, //
// this will become a requirement for Apps to ensure that an async race-condition //
// is not created by having calls from the first screen reliant on calls from //
// the OnStart having completed. Please be aware and careful of this! //
// //
// The 'normal' Power Apps pre-loading screen will see your users looking at an //
// endlessly spinning item that is not engaging, I highly suggest drawing their //
// attention in the loading screen. //
// //
// Do not move the setting of the initial variables away from the OnStart. //
// This ensures that your objects are branded before the App is loaded into view. //
// //
///////////////////////////////////////////////////////////////////////////////////////
//// //// //// //// //// //// //// ////
///////////////////////////////////////////////////////////////////////////////////////
// This section sets the default colours for all default items within the App. //
// This will mean all default items are branded 'automagically'. //
///////////////////////////////////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////////////////////////////////
// //
// -- Set Colours & Values -- //
// //
// To set your own permanent and default theme, change: //
// - the 3 colours //
// - the 3 text colours that contrast those effectively //
// - the default Text colour //
// - the default font and its size (will affect other sizes) //
// - whether the Theme is DarkMode //
// //
// (DarkMode sets: Background colour for Screen, Checkboxes, Radio items. //
// These can of course be over-ridden by changing the property on the object. //
// I changed these to give more contrast than the standard backgrounds or items. //
// These are set to a colorfade -50% or +50% of a Color if Darkmode is True/False //
// //
///////////////////////////////////////////////////////////////////////////////////////

Set(
ThisTheme,
{
Name: "PensPlace Dark",

Color1: RGBA(8,8, 8, 1),
Color2: RGBA( 42, 47, 50, 1),
Color3: RGBA( 224, 8, 55, 1),
Color1Text: RGBA( 255, 255, 255, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA(111,147,255,1),

defaultTextColor: RGBA( 248, 248, 248, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: true
}
);

Set(ThisThemeBackup, ThisTheme);
////////////////////////////////////
// //
// -- Set Secondary Font Sizes -- //
// //
// These are based on the //
// theme's default font size //
// //
// Feel free to add your own //
// and override the value in //
// the ControlsTheme section //
// //
////////////////////////////////////

Set(
FontSizes,
{
TextMain: ThisTheme.FontSize -1,
TextEmphasis: ThisTheme.FontSize +1,
Content: ThisTheme.FontSize +2,
Title: ThisTheme.FontSize +6,
SubTitle: ThisTheme.FontSize +4,
AddPicture: ThisTheme.FontSize -3,
FontBrower: ThisTheme.FontSize -5
}
);

////////////////////////////////////////////////
// //
// -- Set Control-level default Properties -- //
// //
////////////////////////////////////////////////

Set(
ControlsTheme,
{

LabelTextColor: ThisTheme.defaultTextColor,
LabelFill: Transparent,
LabelBorderColor: ThisTheme.Color2,
LabelFont: ThisTheme.Font,

ButtonColor: ThisTheme.Color2Text,
ButtonFill: ThisTheme.Color2,
ButtonBorderColor: ThisTheme.Color1,
ButtonHoverColor: ColorFade(ThisTheme.Color2Text, 20%),
ButtonHoverFill: ColorFade(ThisTheme.Color2, 20%),
ButtonHoverBorderColor: ColorFade(ThisTheme.Color1, 20%),
ButtonPressedColor: ThisTheme.Color2,
ButtonPressedFill: ThisTheme.Color2Text,
ButtonPressedBorderColor: ThisTheme.Color2,
ButtonFont: ThisTheme.Font,

InputTextColor: ThisTheme.Color1Text,
InputFill: ThisTheme.Color1,
InputBorderColor: ThisTheme.Color2,
InputHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
InputHoverFill: ColorFade(ThisTheme.Color1, 20%),
InputHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
InputPressedColor: ThisTheme.Color1Text,
InputPressedFill: ThisTheme.Color1,
InputPressedBorderColor: ColorFade(ThisTheme.Color2, 20%),
InputFont: ThisTheme.Font,
InputDelayOutput: true,

PenInputInkColor: ThisTheme.defaultTextColor,
PenInputBorderColor: ThisTheme.defaultTextColor,
PenInputInkSize: 2,
PenInputBackground: Transparent,

DropdownTextColor: ThisTheme.Color1Text,
DropdownFill: ThisTheme.Color1,
DropdownBorderColor: ThisTheme.Color2,
DropdownHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
DropdownHoverFill: ColorFade(ThisTheme.Color1, 20%),
DropdownHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
DropdownPressedColor: ThisTheme.Color1,
DropdownPressedFill: ThisTheme.Color1Text,
DropdownPressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
DropdownChevronBackground: ThisTheme.Color2,
DropdownChevronFill: ThisTheme.Color2Text,
DropdownChevronHoverBackground: ColorFade(ThisTheme.Color2, 20%),
DropdownChevronHoverFill: ColorFade(ThisTheme.Color2Text, 20%),
DropdownSelectionColor: ThisTheme.Color3Text,
DropdownSelectionFill: ThisTheme.Color3,
DropdownFont: ThisTheme.Font,

ComboBoxTextColor: ThisTheme.Color1Text,
ComboBoxFill: ThisTheme.Color1,
ComboBoxBorderColor: ThisTheme.Color2,
ComboBoxHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
ComboBoxHoverFill: ColorFade(ThisTheme.Color1, 20%),
ComboBoxHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
ComboBoxPressedColor: ThisTheme.Color2Text,
ComboBoxPressedFill: ThisTheme.Color2,
ComboBoxPressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
ComboBoxSelectionColor: ThisTheme.Color3Text,
ComboBoxSelectionFill: ThisTheme.Color3,
ComboBoxChevronBackground: ThisTheme.Color2,
ComboBoxChevronFill: ThisTheme.Color2Text,
ComboBoxChevronHoverBackground: ColorFade(ThisTheme.Color2, 20%),
ComboBoxChevronHoverFill: ColorFade(ThisTheme.Color2Text, 20%),
ComboBoxFont: ThisTheme.Font,
ComboBoxMoreItemsButtonColor: ThisTheme.Color2,

DatePickerColor: ThisTheme.Color1Text,
DatePickerFill: ThisTheme.Color1,
DatePickerBorderColor: ThisTheme.Color2,
DatePickerIconFill: ThisTheme.Color2Text,
DatePickerIconBackground: ThisTheme.Color2,
DatePickerSelectedDateFill: ThisTheme.Color2,
DatePickerHoverDateFill: ThisTheme.Color3Text,
DatePickerHeaderFill: ThisTheme.Color3,
DatePickerFont: ThisTheme.Font,
//
// Sancho's note:
// Tried to template these but IDE import only picks up design properties currently :(
//
// DatePickerStartOfWeek: StartOfWeek.Monday,
// DatePickerFormat: DateTimeFormat.ShortDate,
// DatePickerDefaultDate: Today(),
// DatePickerDateTimeZone: DateTimeZone.Local,
// DatePickerLanguage: "en-GB",


ListBoxTextColor: ThisTheme.Color1Text,
ListBoxFill: ThisTheme.Color1,
ListBoxBorderColor: ThisTheme.Color2,
ListBoxHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
ListBoxHoverFill: ColorFade(ThisTheme.Color1, 20%),
ListBoxHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
ListBoxPressedColor: ThisTheme.Color2Text,
ListBoxPressedFill: ThisTheme.Color2,
ListBoxPressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
ListBoxSelectionColor: ThisTheme.Color3Text,
ListBoxSelectionFill: ThisTheme.Color3,
ListBoxFont: ThisTheme.Font,
ListBoxItemPaddingLeft: 10,

CheckBoxTextColor: ThisTheme.defaultTextColor,
CheckBoxInnerBackground: If(
ThisTheme.DarkMode,
ColorFade(ThisTheme.Color1, -50%),
ColorFade(ThisTheme.Color1, 50%)
),
CheckBoxBorderColor: ThisTheme.Color2,
CheckBoxHoverColor: ColorFade(ThisTheme.defaultTextColor, 20%),
CheckBoxHoverFill: ColorFade(Transparent, 20%),
CheckBoxHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
CheckBoxPressedColor: ColorFade(ThisTheme.defaultTextColor, -20%),
CheckBoxPressedFill: ColorFade(Transparent, -20%),
CheckBoxPressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
CheckBoxOutsideBorderColor: ThisTheme.Color2,
CheckBoxFill: Transparent,
CheckBoxCheckmarkFill: ThisTheme.defaultTextColor,
CheckBoxFont: ThisTheme.Font,
CheckBoxSize: 40,

RadioTextColor: ThisTheme.defaultTextColor,
RadioOutsideFill: Transparent,
RadioOutsideBorderColor: ThisTheme.Color2,
RadioHoverColor: ThisTheme.Color2,
RadioHoverFill: Transparent,
RadioPressedColor: ThisTheme.defaultTextColor,
RadioPressedFill: Transparent,
RadioBorderColor: ThisTheme.Color2,
RadioBackgroundFill: If(ThisTheme.DarkMode,
ColorFade(ThisTheme.Color1, -50%),
ColorFade(ThisTheme.Color1, 50%)
),
RadioSelectionFill: ThisTheme.defaultTextColor,
RadioFont: ThisTheme.Font,
RadioSize: 40,
RadioLayout: Layout.Horizontal,

ToggleTextColor: ThisTheme.defaultTextColor,
ToggleBorderColor: ThisTheme.Color2,
ToggleHandleFill: ThisTheme.Color2,
ToggleFalseFill: ThisTheme.Color1,
ToggleTrueFill: ThisTheme.Color3,
ToggleFalseHoverFill: ColorFade(ThisTheme.Color1, 20%),
ToggleTrueHoverFill: ColorFade(ThisTheme.Color3, 20%),
ToggleHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
TogglePressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
ToggleFont: ThisTheme.Font,
ToggleTextPosition: TextPosition.Left,

SliderBorderColor: ThisTheme.Color2,
SliderHandleFill: White,
SliderBackground: ThisTheme.Color3,
SliderValueFill: ThisTheme.Color2,
SliderHandleHoverFill: ColorFade(White, 20%),
SliderHandleActiveFill: ColorFade(White, 40%),
SliderRailHoverFill: ColorFade(ThisTheme.Color3, 20%),
SliderValueHoverFill: ColorFade(ThisTheme.Color2, 20%),
SliderHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
SliderPressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
SliderRailThickness: 24,
SliderHandleSize: 24,

RatingItemFill: ThisTheme.Color2,
RatingFill: Transparent,
RatingBorderColor: ThisTheme.Color2,

TimerTextColor: ThisTheme.Color1Text,
TimerFill: ThisTheme.Color1,
TimerBorderColor: ColorFade(ThisTheme.Color1, -20%),
TimerHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
TimerHoverFill: ColorFade(ThisTheme.Color1, 20%),
TimerHoverBorderColor: ColorFade(ThisTheme.Color1, 20%),
TimerPressedColor: ThisTheme.Color1,
TimerPressedFill: ThisTheme.Color1Text,
TimerPressedBorderColor: ThisTheme.Color1,
TimerFont: ThisTheme.Font,

ImageFill: Transparent,
ImageBorderColor: Transparent,
ImageHoverFill: Transparent,
ImageHoverBorderColor: Transparent,
ImagePressedFill: Transparent,
ImagePressedBorderColor: Transparent,

CameraBorderColor: ThisTheme.Color2,

BarcodeColor: ThisTheme.Color1Text,
BarcodeFill: ThisTheme.Color1,
BarcodeBorderColor: ThisTheme.Color2,
BarcodeHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
BarcodeHoverFill: ColorFade(ThisTheme.Color1, 20%),
BarcodeHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
BarcodePressedColor: ThisTheme.Color1,
BarcodePressedFill: ThisTheme.Color1Text,
BarcodePressedBorderColor: ThisTheme.Color1,
BarcodeFont: ThisTheme.Font,

VideoFill: ThisTheme.Color1,
VideoBorderColor: ThisTheme.Color2,

StreamColor: ThisTheme.defaultTextColor,
StreamFill: Transparent,
StreamBorderColor: ThisTheme.Color2,

AudioFill: ThisTheme.Color1,
AudioBorderColor: ColorFade(ThisTheme.Color1, -20%),

MicrophoneColor: ThisTheme.Color1Text,
MicrophoneFill: ThisTheme.Color1,
MicrophoneBorderColor: ColorFade(ThisTheme.Color1, -20%),
MicrophoneHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
MicrophoneHoverFill: ColorFade(ThisTheme.Color1, 20%),
MicrophoneHoverBorderColor: ThisTheme.Color1,
MicrophonePressedColor: ColorFade(ThisTheme.Color1Text, -20%),
MicrophonePressedFill: ColorFade(ThisTheme.Color1, -20%),
MicrophonePressedBorderColor: ColorFade(ThisTheme.Color1, -40%),

AddPictureColor: ThisTheme.Color1Text,
AddPictureFill: ThisTheme.Color1,
AddPictureBorderColor: ThisTheme.Color2,
AddPictureHoverColor: ThisTheme.Color1Text,
AddPictureHoverFill: ColorFade(ThisTheme.Color1, 20%),
AddPictureHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
AddPicturePressedColor: ThisTheme.Color1Text,
AddPicturePressedFill: ColorFade(ThisTheme.Color1, -20%),
AddPicturePressedBorderColor: ColorFade(ThisTheme.Color2, -20%),
AddPictureFont: ThisTheme.Font,

ImportColor: ThisTheme.Color1Text,
ImportFill: ThisTheme.Color1,
ImportBorderColor: ColorFade(ThisTheme.Color1, -20%),
ImportFont: ThisTheme.Font,
ImportHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
ImportHoverFill: ColorFade(ThisTheme.Color1, 20%),
ImportHoverBorderColor: ThisTheme.Color1,
ImportPressedColor: ThisTheme.Color1Text,
ImportPressedFill: ColorFade(ThisTheme.Color1, -20%),
ImportPressedBorderColor: ColorFade(ThisTheme.Color1, -40%),

ExportColor: ThisTheme.Color1Text,
ExportFill: ThisTheme.Color1,
ExportBorderColor: ColorFade(ThisTheme.Color1, -20%),
ExportFont: ThisTheme.Font,
ExportHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
ExportHoverFill: ColorFade(ThisTheme.Color1, 20%),
ExportHoverBorderColor: ThisTheme.Color1,
ExportPressedColor: ThisTheme.Color1Text,
ExportPressedFill: ColorFade(ThisTheme.Color1, -20%),
ExportPressedBorderColor: ColorFade(ThisTheme.Color1, -40%),

ChartLegendColor: ThisTheme.defaultTextColor,
ChartLegendFont: ThisTheme.Font,

/////////////////
//
// Gallery Items
//
GalleryFill: RGBA(0,0,0,0),
GalleryBorderColor: ThisTheme.Color2,
//
// Gallery Title and Subtitle
//
GallerytitleLabelColor: ThisTheme.Color3,
GallerysubtitleLabelColor: ThisTheme.defaultTextColor,
GallerytitleLabelFont: ThisTheme.Font,
GallerysubtitleLabelFont: ThisTheme.Font,
//
// Body content label in Flexible Height Gallery
//
GallerycontentLabelColor: ThisTheme.defaultTextColor,
GallerycontentLabelFont: ThisTheme.Font,
//
/////////////////

/////////////////
//
// Icons
//
// This will apply to all icons
// (excluding new screen icons used as BGs)
//
// IconFill is also used for the background shape of
// the New Screen headers in: List
//
IconFill: ThisTheme.Color3,
IconHoverFill: ThisTheme.Color3Text,
IconPressedFill: ThisTheme.Color1,
// Background set to transparent by default to preserve New Screen-based icons
IconBackground: Transparent,
IconHoverBackground: Transparent,
IconPressedBackground: Transparent,
IconBorderColor: ColorFade(ThisTheme.Color3, -20%),
IconHoverBorderColor: ThisTheme.Color3,
IconPressedBorderColor: ColorFade(ThisTheme.Color3, -40%),


AttachmentTextColor: ThisTheme.Color1Text,
AttachmentFill: ThisTheme.Color1,
AttachmentBorderColor: ThisTheme.Color2,
AttachmentHoverColor: ColorFade(ThisTheme.Color1Text, 20%),
AttachmentHoverFill: ColorFade(ThisTheme.Color1, 20%),
AttachmentHoverBorderColor: ColorFade(ThisTheme.Color2, 20%),
AttachmentFont: ThisTheme.Font,
AttachmentPressedColor: ThisTheme.Color2Text,
AttachmentPressedFill: ThisTheme.Color2,
AttachmentItemColor: ThisTheme.Color3Text,
AttachmentItemFill: ThisTheme.Color3,
AttachmentItemHoverColor: ColorFade(ThisTheme.Color3Text, 20%),
AttachmentItemHoverFill: ColorFade(ThisTheme.Color3, 20%),

/////////////////
//
// Forms
//
EditFormBorderColor: ThisTheme.Color2,
EditFormFill: If(
ThisTheme.DarkMode,
ColorFade(ThisTheme.Color1, -50%),
ColorFade(ThisTheme.Color1, 50%)
),
ViewFormBorderColor: ThisTheme.Color2,
ViewFormFill: If(
ThisTheme.DarkMode,
ColorFade(ThisTheme.Color1, -50%),
ColorFade(ThisTheme.Color1, 50%)
),
// Form Title and * fields
FormTitleLabelColor: ThisTheme.Color3,
FormTitleLabelFont: ThisTheme.Font,

/////////////////
//
// Screen
//
ScreenBackground: If(
ThisTheme.DarkMode,
ColorFade(ThisTheme.Color1, -50%),
ColorFade(ThisTheme.Color1, 50%)
),

/////////////////
//
// Data Table
//
//
// NotUsed
DataTableColor1: ThisTheme.Color1,
DataTableColor2: ThisTheme.Color2,
// Border Lines between headers
DataTableColor3: ThisTheme.Color3,
//
DataTableColor: ThisTheme.Color1Text,
DataTableFill: ThisTheme.Color1,
DataTableColorInverted: ThisTheme.Color3Text,
DataTableSelectedColor: ThisTheme.Color3Text,
DataTableSelectedFill: ThisTheme.Color3,
DataTableHoverColor: ThisTheme.Color2Text,
DataTableHoverFill: ThisTheme.Color2,
DataTableBorderColor: ThisTheme.Color2,
DataTableInputFill: ThisTheme.Color1,
DataTableFont: ThisTheme.Font,
DataTableHeadingFont: ThisTheme.Font,
DataTableHeadingColor: ThisTheme.Color2Text,
DataTableHeadingFill: ThisTheme.Color2,
DataTableFontWeight: FontWeight.Normal,
DataTableHeadingFontWeight: FontWeight.Semibold,

/////////////////
//
// PDFViewer & PowerBI
//
PdfViewerFill: ColorFade(ThisTheme.Color1, -50%),
PdfViewerBorderColor: ThisTheme.Color2,
PowerBIBorderColor: ThisTheme.Color2,

//////////////////////////////////////////////////
// //
// These apply to the Insert>New Screen items //
// //
//////////////////////////////////////////////////
//
// Title Label on New Screen Headers
//
invertedBkgHeaderLabelColor: ThisTheme.Color2Text,
//
// New Screen Header background shape for:
// Scrollable, Email, People, Meeting,
//
// also selected tab shape colour on Meeting screen
// see: IconFill also used for other new screen header shapes
//
IconFillInverted: ThisTheme.Color2,
//
// Label on Success Screen, Tutorial Screen
// To / Subject / Message Title on Email screen
// SubTitle label on PeopleBrowseGallery on Email Screen
// Attendees/Subject/Message labels on Meeting screen
// No Times/Locations labels on Schedule tab of Meeting Screen
// All Left-side labels, and right-side time labels on Calendar screen
// ALSO:
// SubHeader Text Colour on Calendar Screen - NB this is same as BG colour
// SubHeader Text Colour on Schedule tab of Meeting screen - NB this is same as BG colour
//
basicNoSizeLabelColor: ThisTheme.Color3,
//
// Tick on Success Screen
// Send Icon Color on Email Screen
//
invertedBkgHeaderIconColor: ThisTheme.Color3Text,
//
// Title label and icon color in PeopleGallery on Email Screen, People Screen and Meeting Screen
//
basicNoSizeInvertedBkgLabelColor: ThisTheme.Color3Text,
//
// Invite & Schedule tab header label on Meeting screen
// Rooms list name label on Schedule tab on Meeting Screen
//
basicNoSizeWeightColorLabelColor: ThisTheme.defaultTextColor
}
);
Set(ControlsThemeBackup, ControlsTheme);

/////////////////////////////////////////////
// //
// -- Set Control-level Font properties -- //
// //
// This is separated from the above //
// to enable easy changing of font size //
// //
/////////////////////////////////////////////
Set(
ControlsFontSizes,
{
LabelFontSize: FontSizes.TextMain,
ButtonFontSize: FontSizes.TextEmphasis,
InputFontSize: FontSizes.TextMain,
DropdownFontSize: FontSizes.TextMain,
ComboBoxFontSize: FontSizes.TextMain,
DatePickerFontSize: FontSizes.TextMain,
ListBoxFontSize: FontSizes.TextMain,
CheckBoxFontSize: FontSizes.TextMain,
RadioFontSize: FontSizes.TextMain,
ToggleFontSize: FontSizes.TextMain,
TimerFontSize: FontSizes.Title,
BarcodeFontSize: FontSizes.TextEmphasis,
AddPictureFontSize: FontSizes.AddPicture,
ImportFontSize: FontSizes.TextEmphasis,
ExportFontSize: FontSizes.TextEmphasis,
ChartLegendFontSize: FontSizes.AddPicture,
GallerytitleLabelFontSize: FontSizes.Title,
GallerysubtitleLabelFontSize: FontSizes.SubTitle,
GallerycontentLabelFontSize: FontSizes.Content,
AttachmentFontSize: FontSizes.TextMain,
FormTitleLabelFontSize: FontSizes.TextMain,
DataTableFontSize: FontSizes.TextMain,
DataTableHeadingFontSize: FontSizes.TextEmphasis
}
);

Set(TempControlsFontSizes, ControlsFontSizes);



/////////////////////////////////////
// //
// -- Set default Chart Colours -- //
// //
////////////////////////////////////////////////////////////
// //
// You can extend these past the initial 10 here, //
// the colours should loop through. //
// //
////////////////////////////////////////////////////////////
Set(
ReservedChartColorSet,
[
RGBA( 49, 130, 93, 1),
RGBA( 48, 166, 103, 1),
RGBA( 94, 193, 108, 1),
RGBA(246, 199, 144, 1),
RGBA(247, 199, 114, 1),
RGBA(247, 180, 91, 1),
RGBA(246, 143, 100, 1),
RGBA(212, 96, 104, 1),
RGBA(148, 110, 176, 1),
RGBA(118, 154, 204, 1)
]
);





////////////////////////////////////////////////////////////////////////////////////////////////
// //
// -- These are the collections of Themes -- //
// -- insert your own here -- //
// -- or remove them altogether -- //
// //
// You may feel that there is no need to have a change of themes, however please //
// remember that there are people out there who are colorblind or have other visual //
// conditions. I implore you to please keep at least your own theme plus the two //
// highly-contrasted monochrome themes for accessibility reasons. You can also take the //
// code from the 'accessibility eye' on the header These monochrome themes have a high //
// contrast ratio and are easily visible. //
// //
// These have been separated from the concurrent above as they rely on the variables in it. //
// //
////////////////////////////////////////////////////////////////////////////////////////////////

ClearCollect(BrandingColours,

{
Name: "Microsoft Blue Light",
Color1: RGBA(186, 202, 226, 1),
Color2: RGBA( 56, 96, 178, 1),
Color3: RGBA( 0, 18, 107, 1),
Color1Text: RGBA( 15, 15, 15, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA(245, 245, 245, 1),

defaultTextColor: RGBA( 15, 15, 15, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: false
},
{
///////////////////////////////////////////////////////////////////////
//
// This is an example of how to:
// Override the individual control-level properties in a theme
//
// Add your override property to the theme and then set it - that's it!
// (Property must be one of the properties in the ControlsTheme record)
//
// The theme will use its default colours
// unless specified as an override here
//
// You can safely delete this.
//
///////////////////////////////////////////////////////////////////////
Name: "Garish Control-level Test",
Color1: RGBA(186, 202, 226, 1),
Color2: RGBA( 56, 96, 178, 1),
Color3: RGBA( 0, 18, 107, 1),
Color1Text: RGBA( 15, 15, 15, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA(245, 245, 245, 1),

defaultTextColor: RGBA( 15, 15, 15, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: false,

LabelTextColor: Green,
LabelFont: Font.'Great Vibes',
ButtonFill: Red,
DropdownTextColor: Red,
DropdownFill: LightGray,
DropdownBorderColor: Purple,
DropdownChevronBackground: Orange,
PenInputBackground: Pink,
DataTableHeadingFont: Font.'Dancing Script',
DataTableHeadingColor: Black,
DataTableHeadingFill: RGBA(0,255,0,25%),
DataTableSelectedColor: RGBA(255,255,255,50%),
DataTableSelectedFill: MediumPurple,
GallerytitleLabelColor: Red,
GallerysubtitleLabelColor: Orange,
GallerytitleLabelFont: Font.'Great Vibes',
SliderHandleFill: Cyan,
SliderBackground: Red,
SliderValueFill: Fuchsia,
FormTitleLabelColor: Chartreuse,
EditFormFill: RGBA(209, 130, 255, 1),
DatePickerColor: Chartreuse,
DatePickerFill: DarkGreen,
DatePickerIconFill: White,
DatePickerIconBackground: Red,
DatePickerSelectedDateFill: DarkOrange,
DatePickerHoverDateFill: LightCoral,
DatePickerHeaderFill: Fuchsia,
DatePickerFont: Font.'Great Vibes',
IconFill: Fuchsia,
InputFill: Fuchsia,
PenInputInkColor: Magenta,
PenInputInkSize: 5
},
{
Name: "Microsoft Blue Dark",
Color1: RGBA( 0, 18, 107, 1),
Color2: RGBA(56, 96, 178, 1),
Color3: RGBA(186, 202, 226, 1),
Color1Text: RGBA(245, 245, 245, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA( 15, 15, 15, 1),

defaultTextColor: RGBA(245, 245, 245, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: true
},
{
Name: "MonoChrome Light",
Color1: RGBA(190, 190, 190, 1),
Color2: RGBA(130, 130, 130, 1),
Color3: RGBA( 90, 90, 90, 1),
Color1Text: RGBA( 15, 15, 15, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA(245, 245, 245, 1),

defaultTextColor: RGBA( 15, 15, 15, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: false
},
{
Name: "MonoChrome Dark",
Color1: RGBA( 90, 90, 90, 1),
Color2: RGBA(130, 130, 130, 1),
Color3: RGBA(190, 190, 190, 1),
Color1Text: RGBA(245, 245, 245, 1),
Color2Text: RGBA(245, 245, 245, 1),
Color3Text: RGBA( 15, 15, 15, 1),

defaultTextColor: RGBA(245, 245, 245, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: true
}

/////////////////////// Your Theme(s) Here? ///////////////////////
//
////////////////// You can add your own themes ///////////////////
/////// by copying the lines below and uncommenting them /////////
/// you can add any of the properties listed in ControlsTheme ////
//
//,{
// Name: "Totally Awesome Theme 9000",
// Color1: RGBA( 90, 90, 90, 1),
// Color2: RGBA(130, 130, 130, 1),
// Color3: RGBA(190, 190, 190, 1),
// Color1Text: RGBA(245, 245, 245, 1),
// Color2Text: RGBA(245, 245, 245, 1),
// Color3Text: RGBA( 15, 15, 15, 1),
// defaultTextColor: RGBA(245, 245, 245, 1),
// Font: Font.'Segoe UI',
// FontSize: 14,
// DarkMode: true
//}

////////////////////////////////////////////////////////////////////
//
// You can remove my "iAm_ManCat Purples Dark" theme below,
// but not the "Control-level Override" theme.
//
,
{
Name: "iAm_ManCat Purples Dark",
Color1: RGBA(120, 0, 190, 1),
Color2: RGBA(160, 0, 255, 1),
Color3: RGBA(209, 130, 255, 1),
Color1Text: RGBA(255, 255, 255, 1),
Color2Text: RGBA(255, 255, 255, 1),
Color3Text: RGBA( 15, 15, 15, 1),

defaultTextColor: RGBA(245, 245, 245, 1),

Font: Font.'Segoe UI',
FontSize: 14,

DarkMode: true
},

//////////////////////////////////////////////////////////////////////////
//
// This is hidden from the list of themes and is there to allow the logic
// for the control-level individual overrides for each theme to work
//
// DO NOT REMOVE this record from the list
// if you are planning on using multiple themes and my theme screen.
//
//////////////////////////////////////////////////////////////////////////
{
Name: "Control-level Override",
Color1: Red, Color2: Red, Color3: Red, Color1Text: Red, Color2Text: Red, Color3Text: Red, defaultTextColor: Red, Font: Font.'Segoe UI', FontSize: 14, DarkMode: false, LabelTextColor: Red, LabelFill: Red, LabelBorderColor: Red, LabelFont: Font.'Segoe UI', ButtonColor: Red, ButtonFill: Red, ButtonBorderColor: Red, ButtonHoverColor: Red, ButtonHoverFill: Red, ButtonHoverBorderColor: Red, ButtonPressedColor: Red, ButtonPressedFill: Red, ButtonPressedBorderColor: Red, ButtonFont: Font.'Segoe UI', InputTextColor: Red, InputFill: Red, InputBorderColor: Red, InputHoverColor: Red, InputHoverFill: Red, InputHoverBorderColor: Red, InputPressedColor: Red, InputPressedFill: Red, InputPressedBorderColor: Red, InputFont: Font.'Segoe UI', InputDelayOutput: true, PenInputInkColor: Red, PenInputBorderColor: Red, PenInputInkSize: 2, PenInputBackground: Red, DropdownTextColor: Red, DropdownFill: Red, DropdownBorderColor: Red, DropdownHoverColor: Red, DropdownHoverFill: Red, DropdownHoverBorderColor: Red, DropdownPressedColor: Red, DropdownPressedFill: Red, DropdownPressedBorderColor: Red, DropdownChevronBackground: Red, DropdownChevronFill: Red, DropdownChevronHoverBackground: Red, DropdownChevronHoverFill: Red, DropdownSelectionColor: Red, DropdownSelectionFill: Red, DropdownFont: Font.'Segoe UI', ComboBoxTextColor: Red, ComboBoxFill: Red, ComboBoxBorderColor: Red, ComboBoxHoverColor: Red, ComboBoxHoverFill: Red, ComboBoxHoverBorderColor: Red, ComboBoxPressedColor: Red, ComboBoxPressedFill: Red, ComboBoxPressedBorderColor: Red, ComboBoxSelectionColor: Red, ComboBoxSelectionFill: Red, ComboBoxChevronBackground: Red, ComboBoxChevronFill: Red, ComboBoxChevronHoverBackground: Red, ComboBoxChevronHoverFill: Red, ComboBoxFont: Font.'Segoe UI', ComboBoxMoreItemsButtonColor: Red, DatePickerColor: Red, DatePickerFill: Red, DatePickerBorderColor: Red, DatePickerIconFill: Red, DatePickerIconBackground: Red, DatePickerSelectedDateFill: Red, DatePickerHoverDateFill: Red, DatePickerHeaderFill: Red, DatePickerFont: Font.'Segoe UI', ListBoxTextColor: Red, ListBoxFill: Red, ListBoxBorderColor: Red, ListBoxHoverColor: Red, ListBoxHoverFill: Red, ListBoxHoverBorderColor: Red, ListBoxPressedColor: Red, ListBoxPressedFill: Red, ListBoxPressedBorderColor: Red,
ListBoxSelectionColor: Red, ListBoxSelectionFill: Red, ListBoxFont: Font.'Segoe UI', ListBoxItemPaddingLeft: 10, CheckBoxTextColor: Red, CheckBoxInnerBackground: Red, CheckBoxBorderColor: Red, CheckBoxHoverColor: Red, CheckBoxHoverFill: Red, CheckBoxHoverBorderColor: Red, CheckBoxPressedColor: Red, CheckBoxPressedFill: Red, CheckBoxPressedBorderColor: Red, CheckBoxOutsideBorderColor: Red, CheckBoxFill: Red, CheckBoxCheckmarkFill: Red, CheckBoxFont: Font.'Segoe UI', CheckBoxSize: 40, RadioTextColor: Red, RadioOutsideFill: Red, RadioOutsideBorderColor: Red, RadioHoverColor: Red, RadioHoverFill: Red, RadioPressedColor: Red, RadioPressedFill: Red, RadioBorderColor: Red, RadioBackgroundFill: Red, RadioSelectionFill: Red, RadioFont: Font.'Segoe UI', RadioSize: 40, RadioLayout: Layout.Horizontal, ToggleTextColor: Red, ToggleBorderColor: Red, ToggleHandleFill: Red, ToggleFalseFill: Red, ToggleTrueFill: Red, ToggleFalseHoverFill: Red, ToggleTrueHoverFill: Red, ToggleHoverBorderColor: Red, TogglePressedBorderColor: Red, ToggleFont: Font.'Segoe UI', ToggleTextPosition: TextPosition.Left, SliderBorderColor: Red, SliderHandleFill: Red, SliderBackground: Red, SliderValueFill: Red, SliderHandleHoverFill: Red, SliderHandleActiveFill: Red, SliderRailHoverFill: Red, SliderValueHoverFill: Red, SliderHoverBorderColor: Red, SliderPressedBorderColor: Red, SliderRailThickness: 24, SliderHandleSize: 24, RatingItemFill: Red, RatingFill: Red, RatingBorderColor: Red, TimerTextColor: Red, TimerFill: Red, TimerBorderColor: Red, TimerHoverColor: Red, TimerHoverFill: Red, TimerHoverBorderColor: Red, TimerPressedColor: Red, TimerPressedFill: Red, TimerPressedBorderColor: Red, TimerFont: Font.'Segoe UI', ImageFill: Red, ImageBorderColor: Red, ImageHoverFill: Red, ImageHoverBorderColor: Red, ImagePressedFill: Red, ImagePressedBorderColor: Red, CameraBorderColor: Red, BarcodeColor: Red, BarcodeFill: Red, BarcodeBorderColor: Red, BarcodeHoverColor: Red, BarcodeHoverFill: Red, BarcodeHoverBorderColor: Red, BarcodePressedColor: Red, BarcodePressedFill: Red, BarcodePressedBorderColor: Red, BarcodeFont: Font.'Segoe UI', VideoFill: Red, VideoBorderColor: Red, StreamColor: Red, StreamFill: Red, StreamBorderColor: Red, AudioFill: Red, AudioBorderColor: Red, MicrophoneColor: Red, MicrophoneFill: Red, MicrophoneBorderColor: Red, MicrophoneHoverColor: Red, MicrophoneHoverFill: Red, MicrophoneHoverBorderColor: Red, MicrophonePressedColor: Red, MicrophonePressedFill: Red, MicrophonePressedBorderColor: Red, AddPictureColor: Red, AddPictureFill: Red, AddPictureBorderColor: Red, AddPictureHoverColor: Red, AddPictureHoverFill: Red, AddPictureHoverBorderColor: Red, AddPicturePressedColor: Red, AddPicturePressedFill: Red, AddPicturePressedBorderColor: Red, AddPictureFont: Font.'Segoe UI', ImportColor: Red, ImportFill: Red, ImportBorderColor: Red, ImportFont: Font.'Segoe UI', ImportHoverColor: Red, ImportHoverFill: Red, ImportHoverBorderColor: Red, ImportPressedColor: Red, ImportPressedFill: Red, ImportPressedBorderColor: Red, ExportColor: Red, ExportFill: Red, ExportBorderColor: Red, ExportFont: Font.'Segoe UI', ExportHoverColor: Red, ExportHoverFill: Red, ExportHoverBorderColor: Red, ExportPressedColor: Red, ExportPressedFill: Red, ExportPressedBorderColor: Red, ChartLegendColor: Red, ChartLegendFont: Font.'Segoe UI', GalleryFill: Red, GalleryBorderColor: Red, GallerytitleLabelColor: Red, GallerysubtitleLabelColor: Red, GallerytitleLabelFont: Font.'Segoe UI', GallerysubtitleLabelFont: Font.'Segoe UI', GallerycontentLabelColor: Red, GallerycontentLabelFont: Font.'Segoe UI', IconFill: Red, IconHoverFill: Red, IconPressedFill: Red, IconBackground: Red, IconHoverBackground: Red, IconPressedBackground: Red, IconBorderColor: Red, IconHoverBorderColor: Red, IconPressedBorderColor: Red, AttachmentTextColor: Red, AttachmentFill: Red, AttachmentBorderColor: Red, AttachmentHoverColor: Red, AttachmentHoverFill: Red, AttachmentHoverBorderColor: Red, AttachmentFont: Font.'Segoe UI', AttachmentPressedColor: Red, AttachmentPressedFill: Red, AttachmentItemColor: Red, AttachmentItemFill: Red, AttachmentItemHoverColor: Red, AttachmentItemHoverFill: Red, EditFormBorderColor: Red, EditFormFill: Red, ViewFormBorderColor: Red, ViewFormFill: Red, FormTitleLabelColor: Red, FormTitleLabelFont: Font.'Segoe UI', ScreenBackground: Red, DataTableColor1: Red, DataTableColor2: Red, DataTableColor3: Red, DataTableColor: Red, DataTableFill: Red, DataTableColorInverted: Red, DataTableSelectedColor: Red, DataTableSelectedFill: Red, DataTableHoverColor: Red, DataTableHoverFill: Red, DataTableBorderColor: Red, DataTableInputFill: Red, DataTableFont: Font.'Segoe UI', DataTableHeadingFont: Font.'Segoe UI', DataTableHeadingColor: Red, DataTableHeadingFill: Red, DataTableFontWeight: FontWeight.Normal, DataTableHeadingFontWeight: FontWeight.Semibold, PdfViewerFill: Red, PdfViewerBorderColor: Red, PowerBIBorderColor: Red, invertedBkgHeaderLabelColor: Red, IconFillInverted: Red, basicNoSizeLabelColor: Red, invertedBkgHeaderIconColor: Red, basicNoSizeInvertedBkgLabelColor: Red, basicNoSizeWeightColorLabelColor: Red
}
);
///////////////////////////////////
// //
// End of Default theme Values //
// //
///////////////////////////////////







///////////////////////////////////
// //
// Your Code From Here onwards //
// //
///////////////////////////////////



// Assign the User variable to a static value
//
// NB! This is no longer required as User() is now cached
// and more performant due to recent improvements to Power Apps
//
// Set(CurrentUser, User());


// Check if current user is the current Developer of the App
//
// If(User().Email = "gabe.newell@steampowered.com",
// Set(Developer, true));
//
// You could have this check against a list of email addresses
// or against membership of any group (AD/Exchange/Dataverse/SharePoint)
//
If("pen.warner" in User().Email, Set(Developer, true));


// Set hidden Dev items to false
//
// This hides all hidden dev items such as
// buttons that trigger code or other developer-only items.
//
Set(DevHidden, false);


Connections

Office 365 Users (Standard)

sku: Enterprise

With following datasources:

  • Office365Users

SharePoint (Standard)

sku: Enterprise

With following datasources:

  • MyMenuItems
  • MyFavouriteIcons
  • MyMenus

Power Apps for Makers (Standard)

sku: Enterprise

With following datasources:

  • PowerAppsforMakers

Screens

Loading Screen


Global variables

Following variables have been created / or updated on this screen

  • StartLoadingScreenTimer
  •     Color1TextJSON
  •     varUser
  •     Color3TextJSON
  •     editMenu
  • LoadingText
  •     Color2TextJSON
  •     Color3JSON
  •     Color2JSON
  •     defaultIconColor
  •     TriggerFileSelector
  •     Color1JSON
  •     hideMenu

'Loading Screen' As screen

OnVisible

=///////////////////////////////////////////////////////////////
//
// Start the Loading Screen
//
// This starts the Timer, which controls the progress bar
//
// If the data Loads before the Progress bar finishes, then
// the user will be happy, and if it finishes just after
// the progress bar, then you've set their expectations
// with the progress bar so they are likely to be more
// accepting of that slight delay.
//
// We also set the default loading Text here.
// This text is then updated during each step
// of the Data Loading process.
//
///////////////////////////////////////////////////////////////

Set(StartLoadingScreenTimer, false); Set(StartLoadingScreenTimer, true);
Set(LoadingText, "...");

///////////////////////////////////////////////////////////////
//
// Data Loading is moved to the OnTimerStart
//
// This guaratees that the navigate to the next screen
// will only happen once the data has been completely loaded
//
// The above may not apply to your situation and you may want
// the navigate set to another timer if you don't need the
// loaded data to be available during your Home Screen experience.
//
///////////////////////////////////////////////////////////////


Home Screen


Global variables

Following variables have been created / or updated on this screen

  • newMyMenuID
  • galDefault
  • thisMenuID
  • DownloadImage
  • showCollection
  • hideMenu
  • iconicLight
  • FileValue
  • varRecord
  • editMenu
  • createNewMenu
  • onReset
  • bootstrapLight
  • removeFav
  • menuDefault
  • newItem
  • editMenu
  • galDefault
  • FileName
  • galDefault
  • createNewMenu
  • editing
  • addedtofav

'Home Screen' As screen

OnVisible

=UpdateContext({varPageNumber:1});UpdateContext({icon_foreground_color:"#9E9FFF",icon_background_color:"#1B1D23",upload:false,FileValue:Blank(),icon_rotation:0,iconsort:Descending});
ClearCollect(col_myFavouriteIcons,Filter(MyFavouriteIcons,CreatorEmail = User().Email));
ClearCollect(col_temp,Sort(col_myFavouriteIcons,Name,Ascending));
UpdateContext(
{
selectedIconName: First(col_temp).Name,
selectedIconSet: First(col_temp).IconSet
}
)

gal_menu As gallery.galleryVertical

Items

=Sort(fontmenu,ID,Ascending)

OnSelect

=UpdateContext(
{
varPageNumber: 1,
isSearching: false
}
);
Reset(inp_search);
Clear(col_icons);
If(
And(
ThisItem.Expanded = false,
ThisItem.ParentID = 0,
ThisItem.SubItems = true
),
Patch(
fontmenu,
ThisItem,
{Expanded: true}
);
Collect(
fontmenu,
Filter(
col_fontmenu_home,
ParentID = ThisItem.ID
)
),
Patch(
fontmenu,
ThisItem,
{Expanded: false}
);
Remove(
fontmenu,
Filter(
col_fontmenu_home,
ParentID = ThisItem.ID
)
);
If(
ThisItem.SubItems,
Set(
galDefault,
ThisItem
)
)
);
Switch(
ThisItem.MenuText,
"Fluent UI",
ClearCollect(
col_icons,
FluentUI
),
"Material Design",
ClearCollect(
col_icons,
MaterialDesign
),
"Font Awesome",
ClearCollect(
col_icons,
FontAwesome
),
"Simple Icons",
ClearCollect(
col_icons,
SimpleIcons
),
"Game Icons",
ClearCollect(
col_icons,
GameIcons
),
"Remix",
ClearCollect(
col_icons,
Remix
),
"Bootstrap",
ClearCollect(
col_icons,
Bootstrap
),
"Tabler",
ClearCollect(
col_icons,
Tabler
),
"Teeny",
ClearCollect(
col_icons,
Teeny
),
"Feather",
ClearCollect(
col_icons,
Feather
),
"Crypto Icons",
ClearCollect(
col_icons,
Crypto
),
"Box",
ClearCollect(
col_icons,
Box
),
"Weather",
ClearCollect(
col_icons,
Weather
),
"Animated",
ClearCollect(
col_icons,
WeatherAni
),
"Public Domain",
ClearCollect(
col_icons,
PublicDomains
),
"Pixelart",
ClearCollect(
col_icons,
PixelArt
),
"Microsoft Graphics",
ClearCollect(
col_icons,
MSIcons
),
"VS Code",
ClearCollect(
col_icons,
VSCode
),
"Twemoji",
ClearCollect(
col_icons,
Twemoji
),
"La Capitaine",
ClearCollect(
col_icons,
lacaptaine
),
"Flags",
ClearCollect(
col_icons,
flags
),
"AzDevMDL2",
ClearCollect(
col_icons,
AzDevMDL2
),
"SegoeMDL2",
ClearCollect(
col_icons,
SegoeMDL2
),
"Icofont",
ClearCollect(
col_icons,
Icofont
),
"Bowtie",
ClearCollect(
col_icons,
Bowtie
),
"Octicons",
ClearCollect(
col_icons,
Octicons
),
"Hero",
ClearCollect(
col_icons,
HeroIcons
)
);
Switch(
ThisItem.ID,1,
UpdateContext(
{
selectedIconName: First(col_myFavouriteIcons).Name,
selectedIconSet: First(col_myFavouriteIcons).IconSet
}
),

UpdateContext(
{
selectedIconName: First(col_icons).Name,
selectedIconSet: First(col_icons).Set
}
)
)

gal_MenuBuilder As gallery.galleryHorizontal

Items

=//If(editMenu,Sort(Filter(MyMenuItems,Menu.Value = gal_MyMenus.Selected.Title),ItemID,Ascending),
Sort(newMenu,ItemID,Ascending)

btn_hid_add_blank_item As button

OnSelect

=Collect(newMenu,{ItemID: CountRows(newMenu)+1,MenuText:""})

Text

=""

Button3_1 As button

OnSelect

=Set(editMenu,false);Clear(newMenu);Navigate('Home Screen',ScreenTransition.Fade)

Text

=""

Button3_8 As button

OnSelect

=If(editMenu,Collect(MyMenuItems,newMenu);Set(createNewMenu,true), Set(createNewMenu,true));

Text

=""

selected_Icon As image

Image

=If(
upload,
FileValue,
If(
gal_menu.Selected.MenuText = "My Favourites" And Not(isSearching),
gal_myfavs.Selected.light_icon,
gal_icons.Selected.ico_image
)
)
/*If(
upload,
FileValue,
Switch(
gal_menu.Selected.MenuText,
"My Favourites",
Switch(
gal_MyFavs_1.Selected.IconSet,
"Bowtie",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Bowtie,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"<path d",
"<path fill='" & gal_MyFavs_1.Selected.DarkColor & "' d"
)
),
"AzDevMDL2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
AzDevMDL2,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"<path d",
"<path fill='" & gal_MyFavs_1.Selected.DarkColor & "' d"
)
),
"SegoeMDL2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
SegoeMDL2,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"<path d",
"<path fill='" & gal_MyFavs_1.Selected.DarkColor & "' d"
)
),
"Icofont",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Icofont,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"<path d",
"<path fill='" & gal_MyFavs_1.Selected.DarkColor & "' d"
)
),
"Fluent UI",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
FluentUI,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path ",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "' "
)
),
"Public Domain",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
LookUp(
PublicDomains,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path ",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "' "
),
"ellipse",
"ellipse fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
),
"circle",
"circle fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
),
"stroke='#000'",
"stroke='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Feather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Feather,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"stroke='currentColor'",
"stroke='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Fluent UI",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
FluentUI,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Bootstrap",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Bootstrap,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"fill='currentColor'",
"fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Material Design",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
MaterialDesign,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Font Awesome",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
FontAwesome,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Simple Icons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
SimpleIcons,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Octicons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Octicons,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Weather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
Weather,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Public Domain",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
LookUp(
PublicDomains,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path ",
"path fill='" & gal_MyFavs_1.Selected.DarkColor & "' "
),
"ellipse",
"ellipse fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
),
"circle",
"circle fill='" & gal_MyFavs_1.Selected.DarkColor & "'"
),
"stroke='#000'",
"stroke='" & gal_MyFavs_1.Selected.DarkColor & "'"
)
),
"Game Icons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
LookUp(
GameIcons,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"#000",
gal_MyFavs_1.Selected.DarkColor
)
),
"Microsoft Graphics",
"data:image/svg+xml," & EncodeUrl(
LookUp(
MSIcons,
Name = gal_MyFavs_1.Selected.Title
).Icon
),
"VS Code",
"data:image/svg+xml," & EncodeUrl(
LookUp(
VSCode,
Name = gal_MyFavs_1.Selected.Title
).Icon
),
"Twemoji",
"data:image/svg+xml," & EncodeUrl(
LookUp(
Twemoji,
Name = gal_MyFavs_1.Selected.Title
).Icon
),
"Flags",
"data:image/svg+xml," & EncodeUrl(
LookUp(
Flags_1.Flags,
Name = gal_MyFavs_1.Selected.Title
).Icon
),
"Teeny",
"data:image/svg+xml," & EncodeUrl(
LookUp(
Teeny,
Name = gal_MyFavs_1.Selected.Title
).Icon
),
"Remix",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
LookUp(
Remix,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path d=",
"path fill='" & icon_foreground.inputValue & "' d="
),
"path fill-rule='nonzero'",
"path fill='" & icon_foreground.inputValue & "' fill-rule='nonzero'"
),
"circle=",
"fill='" & icon_foreground.inputValue & "' circle"
)
),
"Pixelart",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
LookUp(
PixelArt,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"fill='currentColor'",
"fill='" & icon_foreground.inputValue & "'"
),
"stroke='#000'",
"stroke='" & icon_foreground.inputValue & "'"
)
),
"Tabler",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
LookUp(
Tabler,
Name = gal_MyFavs_1.Selected.Title
).Icon,
"path d=",
"path stroke='" & icon_foreground.inputValue & "' d="
),
"line x1=",
"line stroke='" & icon_foreground.inputValue & "' x1="
),
"circle cx=",
"circle stroke='" & icon_foreground.inputValue & "' cx="
),
"rect ",
"rect stroke='" & icon_foreground.inputValue & "' "
),
"polyline points",
"polyline stroke='" & icon_foreground.inputValue & "' points"
),
"ellipse ",
"ellipse stroke='" & icon_foreground.inputValue & "' "
),
"currentColor",
icon_foreground.inputValue
)
)
),
"Feather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"stroke='currentColor'",
"stroke='" & icon_foreground.inputValue & "'"
)
),
"Fluent UI",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"fill='#212121'",
"fill='" & icon_foreground.inputValue & "'"
),
"fill='none'",
""
)
),
"Bootstrap",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"fill='currentColor'",
"fill='" & icon_foreground.inputValue & "'"
)
),
"Material Design",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Teeny",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"stroke='black'",
"stroke='" & icon_foreground.inputValue & "'"
),
"fill='black'",
"fill='" & icon_foreground.inputValue & "'"
)
),
"Font Awesome",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Iconic",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Simple Icons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Octicons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Microsoft Graphics",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"VS Code",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"Twemoji",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"Weather Animated",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"Flags",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"La Capitaine",
"data:image/svg+xml," & EncodeUrl(gal_icons.Selected.Icon),
"Weather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path",
"path fill='" & icon_foreground.inputValue & "'"
)
),
"Public Domain",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"path ",
"path fill='" & icon_foreground.inputValue & "' "
),
"ellipse",
"ellipse fill='" & icon_foreground.inputValue & "'"
),
"circle",
"circle fill='" & icon_foreground.inputValue & "'"
),
"stroke='#000'",
"stroke='" & icon_foreground.inputValue & "'"
),
"fill='#010101'",
"fill='" & icon_foreground.inputValue & "'"
)
),
"Eva",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"#231f20",
icon_foreground.inputValue
)
),
"Game Icons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"#000",
icon_foreground.inputValue
)
),
"Weather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"path d",
"path fill='" & icon_foreground.inputValue & "' d"
)
),
"Remix",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"path d=",
"path fill='" & icon_foreground.inputValue & "' d="
),
"path fill-rule='nonzero'",
"path fill='" & icon_foreground.inputValue & "' fill-rule='nonzero'"
),
"circle=",
"fill='" & icon_foreground.inputValue & "' circle"
)
),
"Pixelart",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"fill='currentColor'",
"fill='" & icon_foreground.inputValue & "'"
),
"stroke='#000'",
"stroke='" & icon_foreground.inputValue & "'"
)
),
"Tabler",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
gal_icons.Selected.Icon,
"path d=",
"path stroke='" & icon_foreground.inputValue & "' d="
),
"line x1=",
"line stroke='" & icon_foreground.inputValue & "' x1="
),
"circle cx=",
"circle stroke='" & icon_foreground.inputValue & "' cx="
),
"rect ",
"rect stroke='" & icon_foreground.inputValue & "' "
),
"polyline points",
"polyline stroke='" & icon_foreground.inputValue & "' points"
),
"ellipse ",
"ellipse stroke='" & icon_foreground.inputValue & "' "
),
"currentColor",
icon_foreground.inputValue
)
),
"AzDevMDL2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"<path d",
"<path fill='" & icon_foreground.inputValue & "' d"
)
),
"SegoeMDL2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"<path d",
"<path fill='" & icon_foreground.inputValue & "' d"
)
),
"Icofont",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"<path d",
"<path fill='" & icon_foreground.inputValue & "' d"
)
),
"Bowtie",
"data:image/svg+xml," & EncodeUrl(
Substitute(
gal_icons.Selected.Icon,
"<path d",
"<path fill='" & icon_foreground.inputValue & "' d"
)
)
)
)*/

iconImageData As text

add_fav_1 As image

Image

="data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill=' If(encodeImage,  "#006600", Mid(Color3JSON,2,7)) ' d='M8.09 18.61l6-14a1 1 0 011.87.67l-.04.11-6 14a1 1 0 01-1.87-.67l.04-.1 6-14.01-6 14zm-5.8-7.32l4-4a1 1 0 011.5 1.32l-.08.1L4.4 12l3.3 3.3a1 1 0 01-1.32 1.5l-.1-.1-4-4a1 1 0 01-.08-1.31l.08-.1 4-4-4 4zm14-4a1 1 0 011.32-.08l.1.08 4 4a1 1 0 01.08 1.32l-.08.1-4 4a1 1 0 01-1.5-1.33l.08-.1L19.6 12l-3.3-3.3a1 1 0 010-1.4z'/></svg>")

OnSelect

=UpdateContext({encodeImage:false})

add_fav As image

Image

=If(
CountRows(
Filter(
col_myFavouriteIcons,
Title = lbl_IconName.Text And IconSet = lbl_IconSet.Text
)
) > 0,
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill=' If(add_fav.DisplayMode = DisplayMode.Disabled,"#cccccc","#e00837") ' d='M12.82 5.58L12 6.4l-.82-.82a5.37 5.37 0 10-7.6 7.6l7.89 7.9c.3.29.77.29 1.06 0l7.9-7.9a5.38 5.38 0 10-7.61-7.6z'/></svg>"),
"data:image/svg+xml," & EncodeUrl(
"<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='" & If(Not(IsBlank(selected_Icon.Image)),
If(add_fav.DisplayMode = DisplayMode.Disabled,"#cccccc","#e00837"),
Mid(
Color1JSON,
2,
7
)
) & "' d='M12.82 5.58L12 6.4l-.82-.82a5.37 5.37 0 10-7.6 7.6l7.89 7.9c.3.29.77.29 1.06 0l7.9-7.9a5.38 5.38 0 10-7.61-7.6zm6.55 6.54L12 19.48l-7.36-7.36a3.87 3.87 0 115.48-5.48L11.47 8c.3.3.79.29 1.08-.02l1.33-1.34a3.88 3.88 0 015.49 5.48z'/></svg>"
)
)

OnSelect

=If(
CountRows(
Filter(
col_myFavouriteIcons,
Title = lbl_IconName.Text And IconSet = lbl_IconSet.Text
)
) > 0,
Set(
removeFav,
RemoveIf(
MyFavouriteIcons,
IconSet = lbl_IconSet.Text,
Title = lbl_IconName.Text
)
);
If(
!IsBlank(removeFav),
Notify(
"Removed from favourites!",
NotificationType.Success,
2000
),
Notify(
"There was an error removing favorite!",
NotificationType.Error,
2000
)
);
,
Set(
addedtofav,
Patch(
MyFavouriteIcons,
Defaults(MyFavouriteIcons),
{
Title: lbl_IconName.Text,
IconSet: lbl_IconSet.Text,
LightColor: icon_background.inputValue,
DarkColor: icon_foreground.inputValue,
CreatorEmail: varUser.Email
}
)
);
If(
!IsBlank(addedtofav),
Notify(
"Added to favourites!",
NotificationType.Success,
2000
),
Notify(
"There was an error saving favorite!",
NotificationType.Error,
2000
)
);

);
ClearCollect(
col_myFavouriteIcons,
MyFavouriteIcons
);

selected_Icon_1 As image

Image

=selected_Icon.Image

selected_Icon_2 As image

Image

=selected_Icon.Image

selected_Icon_3 As image

Image

=selected_Icon.Image

selected_Icon_4 As image

Image

=selected_Icon.Image

Button3_2 As button

OnSelect

=UpdateContext({encodeImage:!encodeImage})

Text

=""

Button3_3 As button

OnSelect

=Collect(
newMenu,
Table(
{
Title: gal_icons.Selected.Set,
ItemID: CountRows(newMenu) + 1,
ParentItem: 0,
Expanded: false,
Screen: "",
SubItems: false,
MenuText: lbl_IconName.Text,
Tab: gal_icons.Selected.Name,
Icon: gal_icons.Selected.Icon,
DarkIcon: gal_icons.Selected.Icon,
DarkColor: icon_foreground.inputValue,
LightColor: icon_background.inputValue
}
)
);
Set(
onReset,
true
);

Text

=""

Button3_4 As button

OnSelect

=If(
CountRows(
Filter(
col_myFavouriteIcons,
Title = lbl_IconName.Text And IconSet = lbl_IconSet.Text
)
) > 0,
Set(
removeFav,
RemoveIf(
MyFavouriteIcons,
IconSet = lbl_IconSet.Text,
Title = lbl_IconName.Text
)
);
If(
!IsBlank(removeFav),
Notify(
"Removed from favourites!",
NotificationType.Success,
2000
),
Notify(
"There was an error removing favorite!",
NotificationType.Error,
2000
)
);
,
Set(
addedtofav,
Patch(
MyFavouriteIcons,
Defaults(MyFavouriteIcons),
{
Title: lbl_IconName.Text,
IconSet: lbl_IconSet.Text,
LightColor: icon_background.inputValue,
DarkColor: icon_foreground.inputValue,
CreatorEmail: varUser.Email
}
)
);
If(
!IsBlank(addedtofav),
Notify(
"Added to favourites!",
NotificationType.Success,
2000
),
Notify(
"There was an error saving favorite!",
NotificationType.Error,
2000
)
);

);
ClearCollect(
col_myFavouriteIcons,
MyFavouriteIcons
);

Text

=""

Button3_5 As button

OnSelect

=Set(DownloadImage,true)

Text

=""

Image1 As image

Image

="data:image/svg+xml," & EncodeUrl("<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill=' Mid(Color3TextJSON,2,7) & "' d='M16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16ZM12.8403 29.628C13.8754 29.8753 14.936 30.0002 16.0003 30C17.0633 29.9984 18.1225 29.8725 19.1563 29.625C19.4531 29.5548 19.721 29.3945 19.9231 29.166C20.1252 28.9376 20.2518 28.6522 20.2853 28.349L20.5202 26.219C20.5538 25.868 20.7123 25.5408 20.9669 25.2968C21.2214 25.0529 21.5551 24.9085 21.9072 24.89C22.1404 24.8802 22.3727 24.924 22.5863 25.018L24.5412 25.875C24.728 25.9571 24.9297 25.9995 25.1337 25.9995C25.3377 25.9995 25.5395 25.9571 25.7262 25.875C25.9104 25.7949 26.0759 25.6774 26.2123 25.53C27.6568 23.9736 28.735 22.1139 29.3682 20.087C29.4589 19.7938 29.4561 19.4797 29.3602 19.1882C29.2644 18.8967 29.0802 18.6422 28.8333 18.46L27.1043 17.185C26.8196 16.9778 26.618 16.676 26.5357 16.3337C26.4535 15.9914 26.4958 15.6309 26.6553 15.317C26.7622 15.1078 26.917 14.9269 27.1073 14.789L28.8273 13.518C29.0757 13.3364 29.2611 13.0815 29.3574 12.7892C29.4537 12.4969 29.4561 12.1817 29.3642 11.888C28.7321 9.86076 27.6533 8.00111 26.2073 6.44598C25.9982 6.22242 25.7249 6.0692 25.4251 6.00742C25.1253 5.94563 24.8137 5.97831 24.5332 6.10098L22.5873 6.957C22.374 7.04998 22.1418 7.09146 21.9095 7.07809C21.6772 7.06473 21.4513 6.99689 21.2501 6.88007C21.0488 6.76324 20.8779 6.60071 20.7511 6.40561C20.6244 6.21051 20.5453 5.98832 20.5202 5.75699L20.2843 3.63699C20.2513 3.33005 20.1228 3.04118 19.9171 2.81104C19.7113 2.58089 19.4386 2.42105 19.1372 2.354C18.1104 2.12457 17.0624 2.0029 16.0102 1.991C14.9519 2.00352 13.8976 2.12517 12.8642 2.354C12.5623 2.42036 12.289 2.58029 12.0833 2.811C11.8771 3.03957 11.7488 3.32779 11.7172 3.634L11.4802 5.75598C11.4543 5.98766 11.3746 6.21006 11.2473 6.40536C11.12 6.60067 10.9488 6.76345 10.7473 6.88068C10.5458 6.9979 10.3196 7.06633 10.0869 7.08044C9.85422 7.09456 9.62145 7.05401 9.40725 6.96201L7.46126 6.10498C7.27614 6.02606 7.07698 5.98541 6.87574 5.98541C6.67451 5.98541 6.47536 6.02606 6.29025 6.10498C6.1005 6.18461 5.93001 6.30396 5.79025 6.45499C4.34425 8.01199 3.26489 9.87278 2.63125 11.901C2.54103 12.194 2.54415 12.5078 2.64018 12.799C2.73621 13.0901 2.92041 13.3442 3.16725 13.526L4.89225 14.798C5.17575 15.0066 5.37612 15.3089 5.45778 15.6513C5.53943 15.9937 5.49709 16.3539 5.33825 16.668C5.2334 16.8765 5.08054 17.0571 4.89225 17.195L3.16725 18.47C2.91967 18.6521 2.73507 18.9069 2.63917 19.1989C2.54327 19.4909 2.54085 19.8056 2.63224 20.099C3.26559 22.1285 4.34496 23.9907 5.79126 25.549C5.92796 25.6955 6.0934 25.8123 6.27725 25.892C6.46402 25.9727 6.66532 26.0143 6.86876 26.0143C7.0722 26.0143 7.27348 25.9727 7.46025 25.892L9.41525 25.033C9.62848 24.9409 9.86036 24.9 10.0922 24.9138C10.3241 24.9276 10.5495 24.9955 10.7504 25.1122C10.9512 25.229 11.1219 25.3911 11.2486 25.5858C11.3754 25.7804 11.4547 26.0021 11.4802 26.233L11.7153 28.359C11.7496 28.6605 11.876 28.9441 12.0773 29.1712C12.2786 29.3983 12.545 29.5578 12.8403 29.628ZM18.3413 27.762C16.7983 28.0785 15.2072 28.0785 13.6643 27.762L13.4693 26.022C13.374 25.1708 12.9681 24.3846 12.3292 23.814C11.8291 23.3736 11.2147 23.0836 10.5568 22.9775C9.89898 22.8713 9.22451 22.9533 8.61125 23.214L7.00525 23.914C5.96924 22.7277 5.17199 21.3525 4.65725 19.864L6.08125 18.812C6.52119 18.4878 6.8788 18.0648 7.12526 17.5771C7.37171 17.0893 7.50012 16.5505 7.50012 16.004C7.50012 15.4575 7.37171 14.9187 7.12526 14.4309C6.8788 13.9432 6.52119 13.5202 6.08125 13.196L4.65925 12.147C5.17459 10.66 5.9718 9.2862 7.00725 8.10098L8.60725 8.80099C9.04825 8.99573 9.52516 9.09589 10.0072 9.095C10.8657 9.09231 11.6933 8.77419 12.3325 8.20114C12.9718 7.62809 13.3781 6.84009 13.4743 5.987L13.6683 4.23999C14.4419 4.09044 15.2273 4.01013 16.0152 4C16.7972 4.00992 17.5766 4.08989 18.3443 4.23898L18.5313 5.979C18.6237 6.833 19.0286 7.62264 19.6683 8.19598C20.1687 8.63894 20.7848 8.93054 21.4447 9.03677C22.1045 9.143 22.781 9.05949 23.3952 8.79599L24.9953 8.09601C26.0318 9.281 26.8294 10.6552 27.3442 12.143L25.9223 13.189C25.4801 13.512 25.1203 13.9349 24.8724 14.4232C24.6244 14.9115 24.4951 15.4514 24.4951 15.999C24.4951 16.5466 24.6244 17.0865 24.8724 17.5748C25.1203 18.0631 25.4801 18.4859 25.9223 18.809L27.3442 19.858C26.8292 21.3437 26.0334 22.7166 25.0003 23.902L23.4002 23.202C22.8996 22.9792 22.3534 22.878 21.8062 22.9067C21.259 22.9354 20.7264 23.0932 20.2518 23.3671C19.7773 23.6411 19.3742 24.0234 19.0757 24.4829C18.7772 24.9424 18.5917 25.4661 18.5343 26.011L18.3413 27.762Z' /> </svg>")

OnSelect

=Navigate('Administration Screen')

img_next As image

Image

=If(img_next_last.DisplayMode = DisplayMode.Disabled,"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3 4.753C3 3.34519 4.57781 2.51363 5.73916 3.30937L16.2376 10.5028C17.2478 11.1949 17.253 12.6839 16.2477 13.3831L5.7492 20.6847C4.58887 21.4917 3 20.6613 3 19.248V4.753ZM4.89131 4.54677C4.7254 4.43309 4.5 4.55189 4.5 4.753V19.248C4.5 19.4499 4.72698 19.5685 4.89274 19.4532L15.3912 12.1517C15.5348 12.0518 15.5341 11.8391 15.3898 11.7402L4.89131 4.54677ZM20.9999 3.75C20.9999 3.33579 20.6641 3 20.2499 3C19.8357 3 19.4999 3.33579 19.4999 3.75V20.25C19.4999 20.6642 19.8357 21 20.2499 21C20.6641 21 20.9999 20.6642 20.9999 20.25V3.75Z' fill='#383C84'/> </svg>"),
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3 4.753C3 3.34519 4.57781 2.51363 5.73916 3.30937L16.2376 10.5028C17.2478 11.1949 17.253 12.6839 16.2477 13.3831L5.7492 20.6847C4.58887 21.4917 3 20.6613 3 19.248V4.753ZM4.89131 4.54677C4.7254 4.43309 4.5 4.55189 4.5 4.753V19.248C4.5 19.4499 4.72698 19.5685 4.89274 19.4532L15.3912 12.1517C15.5348 12.0518 15.5341 11.8391 15.3898 11.7402L4.89131 4.54677ZM20.9999 3.75C20.9999 3.33579 20.6641 3 20.2499 3C19.8357 3 19.4999 3.33579 19.4999 3.75V20.25C19.4999 20.6642 19.8357 21 20.2499 21C20.6641 21 20.9999 20.6642 20.9999 20.25V3.75Z' fill=' Mid(Color3TextJSON,2,7)'/> </svg>"))

OnSelect

=UpdateContext({varPageNumber: varPageNumber + 1})

img_prev As image

Image

=If(img_prev.DisplayMode = DisplayMode.Disabled,
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M20.9999 4.753C20.9999 3.34519 19.4221 2.51363 18.2607 3.30937L7.76228 10.5028C6.7521 11.1949 6.74691 12.6839 7.75223 13.3831L18.2507 20.6847C19.411 21.4917 20.9999 20.6613 20.9999 19.248V4.753ZM19.1086 4.54677C19.2745 4.43309 19.4999 4.55189 19.4999 4.753V19.248C19.4999 19.4499 19.2729 19.5685 19.1072 19.4532L8.60869 12.1517C8.46507 12.0518 8.46581 11.8391 8.61013 11.7402L19.1086 4.54677ZM3 3.75C3 3.33579 3.33579 3 3.75 3C4.16421 3 4.5 3.33579 4.5 3.75V20.25C4.5 20.6642 4.16421 21 3.75 21C3.33579 21 3 20.6642 3 20.25V3.75Z' fill='#383C84'/> </svg>"),
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M20.9999 4.753C20.9999 3.34519 19.4221 2.51363 18.2607 3.30937L7.76228 10.5028C6.7521 11.1949 6.74691 12.6839 7.75223 13.3831L18.2507 20.6847C19.411 21.4917 20.9999 20.6613 20.9999 19.248V4.753ZM19.1086 4.54677C19.2745 4.43309 19.4999 4.55189 19.4999 4.753V19.248C19.4999 19.4499 19.2729 19.5685 19.1072 19.4532L8.60869 12.1517C8.46507 12.0518 8.46581 11.8391 8.61013 11.7402L19.1086 4.54677ZM3 3.75C3 3.33579 3.33579 3 3.75 3C4.16421 3 4.5 3.33579 4.5 3.75V20.25C4.5 20.6642 4.16421 21 3.75 21C3.33579 21 3 20.6642 3 20.25V3.75Z' fill=' Mid(Color3TextJSON,2,7)'/> </svg>"))

OnSelect

=UpdateContext({varPageNumber: varPageNumber - 1})

img_prev_first As image

Image

=If(img_prev_first.DisplayMode = DisplayMode.Disabled,
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M12.5007 5.50338C12.5007 4.22433 11.0026 3.53209 10.0285 4.36107L2.61872 10.6673C1.79765 11.3661 1.79767 12.6339 2.61875 13.3327L10.0285 19.6386C11.0026 20.4676 12.5007 19.7753 12.5007 18.4963V14.5086L18.5295 19.6392C19.5035 20.4682 21.0016 19.7759 21.0016 18.4969V5.504C21.0016 4.22495 19.5035 3.53272 18.5295 4.3617L12.5007 9.49258V5.50338ZM12.5007 12.5389V11.4623L19.5016 5.504V18.4969L12.5007 12.5389ZM3.5909 11.8096L11.0007 5.50338V18.4963L3.5909 12.1904C3.47361 12.0905 3.4736 11.9094 3.5909 11.8096Z' fill='#383C84'/> </svg>"),
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M12.5007 5.50338C12.5007 4.22433 11.0026 3.53209 10.0285 4.36107L2.61872 10.6673C1.79765 11.3661 1.79767 12.6339 2.61875 13.3327L10.0285 19.6386C11.0026 20.4676 12.5007 19.7753 12.5007 18.4963V14.5086L18.5295 19.6392C19.5035 20.4682 21.0016 19.7759 21.0016 18.4969V5.504C21.0016 4.22495 19.5035 3.53272 18.5295 4.3617L12.5007 9.49258V5.50338ZM12.5007 12.5389V11.4623L19.5016 5.504V18.4969L12.5007 12.5389ZM3.5909 11.8096L11.0007 5.50338V18.4963L3.5909 12.1904C3.47361 12.0905 3.4736 11.9094 3.5909 11.8096Z' fill=' Mid(Color3TextJSON,2,7)'/> </svg>"))

OnSelect

=UpdateContext({varPageNumber: 1})

img_next_last As image

Image

=If(img_next_last.DisplayMode = DisplayMode.Disabled,"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24'  xmlns='http://www.w3.org/2000/svg'> <path d='M11.5 5.50289C11.5 4.22384 12.9981 3.5316 13.9722 4.36058L21.3819 10.6668C22.203 11.3656 22.203 12.6334 21.3819 13.3322L13.9721 19.6381C12.9981 20.4671 11.5 19.7748 11.5 18.4958V14.5091L5.47215 19.639C4.4981 20.4679 3 19.7757 3 18.4966V5.50373C3 4.22468 4.49813 3.53244 5.47218 4.36142L11.5 9.49148V5.50289ZM11.5 11.4612L4.5 5.50373V18.4966L11.5 12.5395V11.4612ZM20.4098 11.8091L13 5.50289V18.4958L20.4098 12.1899C20.5271 12.0901 20.5271 11.9089 20.4098 11.8091Z' fill='#383C84'/> </svg>"),
"data:image/svg+xml," & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'> <path d='M11.5 5.50289C11.5 4.22384 12.9981 3.5316 13.9722 4.36058L21.3819 10.6668C22.203 11.3656 22.203 12.6334 21.3819 13.3322L13.9721 19.6381C12.9981 20.4671 11.5 19.7748 11.5 18.4958V14.5091L5.47215 19.639C4.4981 20.4679 3 19.7757 3 18.4966V5.50373C3 4.22468 4.49813 3.53244 5.47218 4.36142L11.5 9.49148V5.50289ZM11.5 11.4612L4.5 5.50373V18.4966L11.5 12.5395V11.4612ZM20.4098 11.8091L13 5.50289V18.4958L20.4098 12.1899C20.5271 12.0901 20.5271 11.9089 20.4098 11.8091Z' fill=' Mid(Color3TextJSON,2,7)'/> </svg>"))

OnSelect

=UpdateContext(
{
varPageNumber: RoundUp(
CountRows(col_icons) / ddPageSize.SelectedText.Value,
0
)
}
)

gal_icons As gallery.galleryVertical

Items

=If(
varPageNumber = 1,
FirstN(
Sort( col_icons,Name,iconsort),
ddPageSize.SelectedText.Value * varPageNumber
),
LastN(
FirstN(
Sort( col_icons,Name,iconsort),
ddPageSize.SelectedText.Value * varPageNumber
),
ddPageSize.SelectedText.Value * 1
)
)

OnSelect

=UpdateContext({selectedIconName:ThisItem.Name,selectedIconSet:ThisItem.Set})

gal_mymenus As gallery.galleryVertical

Items

=Search(col_MyMenus,inp_search_menu.Text,"{Name}")

OnSelect

=ClearCollect(col_MyMenuItems,Filter(MyMenuItems, Menu.Value = ThisItem.'{Name}'))

gal_menuitems As gallery.galleryVertical

Items

=Sort(col_MyMenuItems,ItemID,Ascending)

gal_myfavs As gallery.galleryVertical

Items

=Sort(
Search(
Filter(
col_myFavouriteIcons,
Upper('Created By'.Email) = Upper(User().Email)
),
inp_search.Text,
"Title"
),
Name,
Ascending
)

OnSelect

=UpdateContext({selectedIconName:ThisItem.Name,selectedIconSet:ThisItem.IconSet})

frm_menu_item As form

DataSource

=MyMenuItems

Item

=gal_menuitems.Selected

Image10 As image

Image

= Switch(
ThisItem.Title,
"Feather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"stroke='currentColor'",
"stroke='" & icon_background.inputValue & "'"
)
),
"FluentUI",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.Icon,
"fill='#212121'",
"fill='" & icon_background.inputValue & "'"
),
"fill='none'",
""
)
),
"Bootstrap",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"fill='currentColor'",
"fill='" & icon_background.inputValue & "'"
)
),
"MaterialDesign",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"Teeny",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.Icon,
"stroke='black'",
"stroke='" & icon_background.inputValue & "'"
),
"fill='black'",
"fill='" & icon_background.inputValue & "'"
)
),
"FontAwesome",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"SimpleIcons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"Octicons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"Box",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"Hero",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"MSIcons",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"VSCode",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"Twemoji",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"Crypto",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"animation",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"Flags",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"lacap",
"data:image/svg+xml," & EncodeUrl(ThisItem.Icon),
"Weather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"path",
"path fill='" & icon_background.inputValue & "'"
)
),
"PublicDomain",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
ThisItem.Icon,
"path ",
"path fill='" & icon_background.inputValue & "' "
),
"ellipse",
"ellipse fill='" & icon_background.inputValue & "'"
),
"circle",
"circle fill='" & icon_background.inputValue & "'"
),
"stroke='#000'",
"stroke='" & icon_background.inputValue & "'"
),
"fill='#010101'",
"fill='" & icon_background.inputValue & "'"
)
),
"GameIcons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"#000",
icon_background.inputValue
)
),
"Remix",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
ThisItem.Icon,
"path d=",
"path fill='" & icon_background.inputValue & "' d="
),
"path fill-rule='nonzero'",
"path fill='" & icon_background.inputValue & "' fill-rule='nonzero'"
),
"circle=",
"fill='" & icon_background.inputValue & "' circle"
)
),
"Pixelart",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.Icon,
"fill='currentColor'",
"fill='" & icon_background.inputValue & "'"
),
"stroke='#000'",
"stroke='" & icon_background.inputValue & "'"
)
),
"Tabler",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
ThisItem.Icon,
"path d=",
"path stroke='" & icon_background.inputValue & "' d="
),
"line x1=",
"line stroke='" & icon_background.inputValue & "' x1="
),
"circle cx=",
"circle stroke='" & icon_background.inputValue & "' cx="
),
"rect ",
"rect stroke='" & icon_background.inputValue & "' "
),
"polyline points",
"polyline stroke='" & icon_background.inputValue & "' points"
),
"ellipse ",
"ellipse stroke='" & icon_background.inputValue & "' "
),
"currentColor",
icon_background.inputValue
)
),
"azdevmdl2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"<path d",
"<path fill='" & icon_background.inputValue & "' d"
)
),
"segoemdl2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"<path d",
"<path fill='" & icon_background.inputValue & "' d"
)
),
"icofont",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"<path d",
"<path fill='" & icon_background.inputValue & "' d"
)
),
"Bowtie",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.Icon,
"<path d",
"<path fill='" & icon_background.inputValue & "' d"
)
)
)

Image10_1 As image

Image

= Switch(
ThisItem.Title,
"Feather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"stroke='currentColor'",
"stroke='" & ThisItem.DarkColor & "'"
)
),
"FluentUI",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.DarkIcon,
"fill='#212121'",
"fill='" & ThisItem.DarkColor & "'"
),
"fill='none'",
""
)
),
"Bootstrap",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"fill='currentColor'",
"fill='" & ThisItem.DarkColor & "'"
)
),
"MaterialDesign",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"Teeny",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.DarkIcon,
"stroke='black'",
"stroke='" & ThisItem.DarkColor & "'"
),
"fill='black'",
"fill='" & ThisItem.DarkColor & "'"
)
),
"FontAwesome",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"SimpleIcons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"Octicons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"Box",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"Hero",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"MSIcons",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"VSCode",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"Twemoji",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"Crypto",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"animation",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"Flags",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"lacap",
"data:image/svg+xml," & EncodeUrl(ThisItem.DarkIcon),
"Weather",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"path",
"path fill='" & ThisItem.DarkColor & "'"
)
),
"PublicDomain",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
ThisItem.DarkIcon,
"path ",
"path fill='" & ThisItem.DarkColor & "' "
),
"ellipse",
"ellipse fill='" & ThisItem.DarkColor & "'"
),
"circle",
"circle fill='" & ThisItem.DarkColor & "'"
),
"stroke='#000'",
"stroke='" & ThisItem.DarkColor & "'"
),
"fill='#010101'",
"fill='" & ThisItem.DarkColor & "'"
)
),
"GameIcons",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"#000",
ThisItem.DarkColor
)
),
"Remix",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
ThisItem.DarkIcon,
"path d=",
"path fill='" & ThisItem.DarkColor & "' d="
),
"path fill-rule='nonzero'",
"path fill='" & ThisItem.DarkColor & "' fill-rule='nonzero'"
),
"circle=",
"fill='" & ThisItem.DarkColor & "' circle"
)
),
"Pixelart",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
ThisItem.DarkIcon,
"fill='currentColor'",
"fill='" & ThisItem.DarkColor & "'"
),
"stroke='#000'",
"stroke='" & ThisItem.DarkColor & "'"
)
),
"Tabler",
"data:image/svg+xml," & EncodeUrl(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
Substitute(
ThisItem.DarkIcon,
"path d=",
"path stroke='" & ThisItem.DarkColor & "' d="
),
"line x1=",
"line stroke='" & ThisItem.DarkColor & "' x1="
),
"circle cx=",
"circle stroke='" & ThisItem.DarkColor & "' cx="
),
"rect ",
"rect stroke='" & ThisItem.DarkColor & "' "
),
"polyline points",
"polyline stroke='" & ThisItem.DarkColor & "' points"
),
"ellipse ",
"ellipse stroke='" & ThisItem.DarkColor & "' "
),
"currentColor",
ThisItem.DarkColor
)
),
"azdevmdl2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"<path d",
"<path fill='" & ThisItem.DarkColor & "' d"
)
),
"segoemdl2",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"<path d",
"<path fill='" & ThisItem.DarkColor & "' d"
)
),
"icofont",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"<path d",
"<path fill='" & ThisItem.DarkColor & "' d"
)
),
"Bowtie",
"data:image/svg+xml," & EncodeUrl(
Substitute(
ThisItem.DarkIcon,
"<path d",
"<path fill='" & ThisItem.DarkColor & "' d"
)
)
)

Button2 As button

OnSelect

=If(SubmitForm(frm_menu_item),Notify(NotificationType.Success,2000);UpdateContext({edit_menu_item:false}),Notify("There was an error saving the Menu Item, please try again!",NotificationType.Error));ClearCollect(col_MyMenuItems,Filter(MyMenuItems,Menu.Value = gal_mymenus.Selected.Name))

Text

="Update"

DataCardValue1 As text

DataCardValue4 As text

DataCardValue5 As text

DataCardValue6 As text

DataCardValue7 As text

DataCardValue9 As text

DataCardValue10 As text