App Home
Medium 15 min setup 10 components
The starting screen for your Power Apps app. KPI cards for key metrics, a recent items table with search and chip filters, breadcrumb navigation, sidebar, bottom nav for mobile, and a loading screen. Part of the Inventory Manager starter kit.
Preview
Sidebar, breadcrumbs, KPI cards, search + chip filters, data table, bottom navigation
Included in this template
KPI cards
4 metric cards with trend badges
Search + filters
Text search with chip status filters
Data table
Recent items with context menu
Breadcrumb nav
Multi-level path navigation
Segmented control
Table/list/card view toggle
Mobile responsive
Bottom nav, FAB, loading screen
Components Used
This template uses these components. Install them before importing the screen YAML.
Code
Paste into the Screens tab in Power Apps Studio (Tree view → Screens → paste YAML).
Screens:
scrAppHome:
Properties:
Fill: =RGBA(249, 250, 251, 1)
LoadingSpinnerColor: =RGBA(0, 120, 212, 1)
OnVisible: |-
=// Initialize collections
ClearCollect(colItems, Table(
{CaseID: "INV-001", Title: "HDMI Cable 2m", Status: "Active", Progress: "P1", Assignee: "Sarah Chen", DueDate: Date(2026,3,15), Priority: "High", CompletedSteps: 3, TotalSteps: 5, Category: "Electronics"},
{CaseID: "INV-002", Title: "Safety Vest (M)", Status: "Low Stock", Progress: "P2", Assignee: "James Wilson", DueDate: Date(2026,3,12), Priority: "High", CompletedSteps: 2, TotalSteps: 4, Category: "Safety"},
{CaseID: "INV-003", Title: "Label Printer Ribbon", Status: "Active", Progress: "P3", Assignee: "Maria Garcia", DueDate: Date(2026,2,28), Priority: "Medium", CompletedSteps: 5, TotalSteps: 5, Category: "Packaging"},
{CaseID: "INV-004", Title: "Box Cutter Blades", Status: "Low Stock", Progress: "P4", Assignee: "Alex Rivera", DueDate: Date(2026,4,1), Priority: "Low", CompletedSteps: 0, TotalSteps: 3, Category: "Hardware"},
{CaseID: "INV-005", Title: "AA Batteries (48-pack)", Status: "Active", Progress: "P5", Assignee: "David Kim", DueDate: Date(2026,3,20), Priority: "High", CompletedSteps: 2, TotalSteps: 4, Category: "Electronics"},
{CaseID: "INV-006", Title: "Stretch Wrap Roll", Status: "Inactive", Progress: "P6", Assignee: "Emily Parker", DueDate: Date(2026,5,1), Priority: "Medium", CompletedSteps: 1, TotalSteps: 6, Category: "Packaging"},
{CaseID: "INV-007", Title: "Nitrile Gloves (L)", Status: "Active", Progress: "P7", Assignee: "Lisa Anderson", DueDate: Date(2026,2,15), Priority: "Low", CompletedSteps: 4, TotalSteps: 4, Category: "Safety"},
{CaseID: "INV-008", Title: "Pallet Jack", Status: "Active", Progress: "P8", Assignee: "Robert Taylor", DueDate: Date(2026,3,25), Priority: "High", CompletedSteps: 3, TotalSteps: 5, Category: "Hardware"}
));
ClearCollect(colStatusChips, Table(
{id: "1", label: "Active", icon: "", color: "", variant: "", selected: false},
{id: "2", label: "Low Stock", icon: "", color: "", variant: "", selected: false},
{id: "3", label: "Inactive", icon: "", color: "", variant: "", selected: false}
));
// Screen state
If(IsBlank(varActiveTab), Set(varActiveTab, 1));
If(IsBlank(varViewMode), Set(varViewMode, "table"));
If(App.Width >= 640 && varNavOpen, Set(varNavOpen, false));
Set(varNavDebounceUntil, DateAdd(Now(), 600, TimeUnit.Milliseconds));
Set(varShowLoadingScreen, false);
Set(varLoadComplete, true);
Set(varStatusFilter, "");
Set(_fabOpen, false);
UpdateContext({ctxShowFilter: false, ctxDeleteItem: Blank(), ctxShowDeleteDialog: false})
Children:
- cntRoot_6:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(249, 250, 251, 1)
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
PaddingLeft: =If(App.Width >= 1024, cntLeftNavHost_6.Width, 0)
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- cntMiddle_6:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =0
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Horizontal
LayoutMaxHeight: =
LayoutMaxWidth: =
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- cntRightStack_6:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutMaxHeight: =
LayoutMaxWidth: =
Children:
- conAppBar_5:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =If(App.Width < 640,Color.Transparent,RGBA(255, 255, 255, 1))
FillPortions: =0
Height: = If(App.Width < 640, 56, 72)
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =If(App.Width < 640, 8, 12)
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
LayoutMaxHeight: =
LayoutMinHeight: =
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
Children:
- conTitleGroup_5:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
FillPortions: =2.5
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =0
LayoutMinWidth: =0
Children:
- cmpBreadcrumbs_1:
Control: CanvasComponent
ComponentName: cmpBreadcrumbs
Properties:
AlignInContainer: =AlignInContainer.Stretch
CharWidths: |-
=Table(
{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:" ",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"!",Size:0.408},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"""",Size:0.585},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"#",Size:0.788},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"$",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"%",Size:1.123},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"&",Size:0.954},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"'",Size:0.346},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"(",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:")",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"*",Size:0.581},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"+",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:",",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"-",Size:0.538},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:".",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"/",Size:0.554},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"0",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"1",Size:0.538},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"2",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"3",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"4",Size:0.769},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"5",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"6",Size:0.746},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"7",Size:0.715},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"8",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"9",Size:0.746},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:":",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:";",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"<",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"=",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:">",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"?",Size:0.592},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"@",Size:1.273},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"A",Size:0.892},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"B",Size:0.808},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"C",Size:0.792},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"D",Size:0.958},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"E",Size:0.692},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"F",Size:0.673},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"G",Size:0.931},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"H",Size:0.981},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"I",Size:0.392},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"J",Size:0.492},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"K",Size:0.815},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"L",Size:0.654},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"M",Size:1.235},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"N",Size:1.023},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"O",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"P",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Q",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"R",Size:0.831},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"S",Size:0.727},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"T",Size:0.762},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"U",Size:0.938},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"V",Size:0.858},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"W",Size:1.288},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"X",Size:0.823},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Y",Size:0.773},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Z",Size:0.785},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"[",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"]",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"^",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"_",Size:0.55},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"`",Size:0.388},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"a",Size:0.696},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"b",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"c",Size:0.627},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"d",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"e",Size:0.712},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"f",Size:0.462},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"g",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"h",Size:0.777},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"i",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"j",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"k",Size:0.7},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"l",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"m",Size:1.181},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"n",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"o",Size:0.796},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"p",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"q",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"r",Size:0.496},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"s",Size:0.573},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"t",Size:0.485},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"u",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"v",Size:0.677},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"w",Size:1.012},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"x",Size:0.669},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"y",Size:0.681},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"z",Size:0.619},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"{",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"|",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"}",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"~",Size:0.927}
)
Config: ={Theme:"light",SeparatorIcon:"chevron",Gap:4,Size:12,MaxItems:4,ItemsBeforeCollapse:1,ItemsAfterCollapse:2,ActiveLastItem:false,BackButton:false}
CurrentColor: ="#111827"
Fill: |
=If(cmpBreadcrumbs_1.Config.Theme = "dark", RGBA(15, 23, 42, 1), Color.Transparent)
Height: =40
Icons: ={Home:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z' clip-rule='evenodd'/></svg>",Chevron:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>",Slash:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path stroke='currentColor' stroke-width='1.5' stroke-linecap='round' d='M7 16L13 4'/></svg>",Dot:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><circle cx='10' cy='10' r='2'/></svg>",Back:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/></svg>",ChevronDown:"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>"}
Items: |-
=Table(
{id: "1", label: "Dashboard", icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z' clip-rule='evenodd'/></svg>"},
{id: "2", label: "Assets", icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path d='M1 1.75A.75.75 0 0 1 1.75 1h1.628a1.75 1.75 0 0 1 1.734 1.51L5.18 3H17.25a.75.75 0 0 1 .735.9l-1.6 8A.75.75 0 0 1 15.65 12.5H5.831l.102.512a.25.25 0 0 0 .248.213H15.25a.75.75 0 0 1 0 1.5H6.181a1.75 1.75 0 0 1-1.714-1.406L3.07 4.878a.25.25 0 0 0-.247-.213H1.75A.75.75 0 0 1 1 3.915V1.75ZM6 17.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM15.5 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/></svg>", appendIcon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>"},
{id: "3", label: "IT Equipment", icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.105a3.501 3.501 0 0 0 1.1 1.677A.75.75 0 0 1 13.26 18H6.74a.75.75 0 0 1-.484-1.323A3.501 3.501 0 0 0 7.355 15H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Zm1.5 0a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-7.5Z' clip-rule='evenodd'/></svg>", appendIcon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>"},
{id: "4", label: "MacBook Pro #A-1042", icon: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path d='M16 4H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Zm-1 8H5V6h10v6ZM2 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5Z'/></svg>"},
{id: "5", label: "Checkout History"}
)
LayoutMinWidth: =0
LinkColor: ="#64748B"
OnBack: =
OnSelect: =
Width: =Parent.Width
- Badge_1:
Control: CanvasComponent
ComponentName: Badge
Properties:
BadgeColor: =RGBA(220, 38, 38, 1)
BadgeCount: =3
Fill: =Color.Transparent
HasNotifications: =true
Height: =Badge_1.Size
HoverText: =""
IconColor: =""
IconSvg: =""
OnSelect: =false
Size: =45
Theme: ="Light"
Width: =Badge_1.Size
- cntUserAvatar_1:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
AlignInContainer: =AlignInContainer.Center
DropShadow: =DropShadow.None
Fill: =RGBA(37, 99, 235, 1)
FillPortions: =0
Height: =45
RadiusBottomLeft: =99
RadiusBottomRight: =99
RadiusTopLeft: =99
RadiusTopRight: =99
Width: =45
X: =If(_cmpNavIsExpanded, 15, (Parent.Width - 34) / 2)
Y: =15
Children:
- lblUserInitials_1:
Control: Label@2.5.1
Properties:
Align: =Align.Center
Color: =RGBA(255, 255, 255, 1)
Font: =Font.'Segoe UI'
FontWeight: =FontWeight.Bold
Height: =34
Size: =11
Text: |-
=Upper(
Concat(
FirstN(Split(User().FullName, " "), 2),
Left(Value, 1)
)
)
Width: =34
X: =6
Y: =6
- rctAppBarDivider_3:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
BorderThickness: =2
DisabledFill: =RGBA(161, 159, 157, 1)
Fill: =RGBA(229, 231, 235, 1)
FocusedBorderThickness: =4
Height: =1
HoverFill: =RGBA(0, 120, 212, 1)
LayoutMinHeight: =16
LayoutMinWidth: =16
PressedFill: =RGBA(0, 120, 212, 1)
Width: =Parent.Width - If(App.Width < 640, 12, 24)
- cntPageGutter_6:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =If(App.Width >= 1024, 16, 8)
LayoutMaxHeight: =
LayoutMaxWidth: =
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =If(App.Width < 640, 12, 24)
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =If(App.Width < 640, 12, 24)
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- Container1:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
DropShadow: =DropShadow.None
FillPortions: =0
Height: =100
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =120
LayoutMinWidth: =16
Width: =Min(Parent.Width - If(App.Width < 640, 24, 48), 1200)
Children:
- Container2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutDirection: =LayoutDirection.Vertical
LayoutMinHeight: =16
LayoutMinWidth: =16
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
Children:
- Text1:
Control: ModernText@1.0.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
AutoHeight: =true
Color: =RGBA(75, 85, 99, 1)
FontWeight: =FontWeight.Bold
LayoutMinHeight: =16
LayoutMinWidth: =16
Size: =22
Text: ="Dashboard"
- Text1_1:
Control: ModernText@1.0.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
AutoHeight: =true
Color: =RGBA(75, 85, 99, 1)
LayoutMinHeight: =16
LayoutMinWidth: =16
Size: =16
Text: ="Welcome back, " &User().FullName&". Here's what's happening."
- ButtonCanvas1:
Control: Button@0.0.45
Properties:
AlignInContainer: =AlignInContainer.Start
Height: =40
Icon: ="Add"
LayoutMinHeight: =16
LayoutMinWidth: =16
Text: ="New Item"
Visible: =App.Width >= 1024
Width: =150
- cntKPISection_3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
FillPortions: =0
Height: =cmpKPI_5.Height
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutMaxHeight: =
LayoutMaxWidth: =
LayoutMinHeight: =0
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 24, 48), 1200)
Children:
- cmpKPI_5:
Control: CanvasComponent
ComponentName: cmpKPI
Properties:
AlignInContainer: =AlignInContainer.Stretch
AnimationEffect: ="Pop"
ColumnsLayout: |-
={
Mobile: 2,
Tablet: 2,
Desktop: 4,
MobileBreakpoint: IfError(Index(App.SizeBreakpoints, 1).Value, 640),
TabletBreakpoint: IfError(Index(App.SizeBreakpoints, 2).Value, 1024),
DesktopBreakpoint: IfError(Index(App.SizeBreakpoints, 3).Value, 1366)
}
Data: |-
=Table(
{ID: 1, Icon: "Box", Value: 1247, Label: "Total Items", PercentChange: 12, PercentLabel: "vs last month", IconBg: "#EBF5FF", IconColor: "#2196F3", isHidden: false},
{ID: 2, Icon: "Warning", Value: 23, Label: "Low Stock Alerts", PercentChange: -8, PercentLabel: "vs last month", IconBg: "#FFF3E0", IconColor: "#FF9800"},
{ID: 3, Icon: "Quantity", Value: 8420, Label: "Total Quantity", PercentChange: 5, PercentLabel: "vs last month", IconBg: "#E8F5E9", IconColor: "#4CAF50"},
{ID: 4, Icon: "Dollar", Value: 284500, Label: "Total Value", PercentChange: 3.2, PercentLabel: "vs last month", IconBg: "#FFEBEE", IconColor: "#F44336"}
)
Height: |-
=With(
{
bp: cmpKPI_5.ColumnsLayout,
w: App.Width,
cardCount: CountRows(Filter(cmpKPI_5.Data, !IfError(isHidden, false)))
},
With(
{
cols: Max(1, If(
w < bp.MobileBreakpoint, bp.Mobile,
w < bp.TabletBreakpoint, bp.Tablet,
bp.Desktop
))
},
With(
{
rows: RoundUp(cardCount / cols, 0)
},
If(
Or(cmpKPI_5.Style = "Compact", cmpKPI_5.Style = "Minimal"),
rows * (96 + cmpKPI_5.StyleConfig.space.md) + cmpKPI_5.StyleConfig.space.md,
rows * (cmpKPI_5.StyleConfig.heights.statsCardMax + cmpKPI_5.StyleConfig.space.lg) + cmpKPI_5.StyleConfig.space.lg
)
)
)
)
Icons: |-
=Table(
{
Name: "Box",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.29 7 12 12 20.71 7'/><line x1='12' y1='22' x2='12' y2='12'/></svg>"
},
{
Name: "TrendLines",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 18 12 15 21 9 3 6 12 2 12'/></svg>"
},
{
Name: "Package",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.29 7 12 12 20.71 7'/><line x1='12' y1='22' x2='12' y2='12'/></svg>"
},
{
Name: "Warning",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"
},
{
Name: "Dollar",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"
},
{
Name: "Quantity",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>"
},{
Name: "Calendar",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"
},
{
Name: "My Tasks",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>"
},
{
Name: "Folder",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>"
},
{
Name: "FileText",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>"
},
{
Name: "Users",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"
},
{
Name: "Zap",
SVG: "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='COLOR' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>"
}
)
IsLoading: =false
LayoutMinHeight: =0
LayoutMinWidth: =0
OnCardClick: =
Style: =If(App.Width < 640,"Compact","Standard")
StyleConfig: |-
={
colors: {
cardBg: RGBA(255, 255, 255, 1),
border: RGBA(229, 231, 235, 1),
text: RGBA(17, 24, 39, 1),
textMuted: RGBA(107, 114, 128, 1),
positive: ColorValue("#22C55E"),
negative: ColorValue("#EF4444"),
neutral: ColorValue("#9E9E9E"),
skeletonBase: RGBA(229, 231, 235, 1),
skeletonShine: RGBA(249, 250, 251, 1)
},
space: {xs:4, sm:8, md:12, lg:16, xl:24},
radius: {md:8, lg:12},
type: {
value: {size:32, sizeCompact:20},
label: {size:12},
body: {size:12}
},
heights: {statsCardMax: 190},
abbreviateThreshold: 10000
}
Width: =Parent.Width
- Container3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
DropShadow: =DropShadow.None
FillPortions: =0
Height: =45
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =16
LayoutMinWidth: =16
PaddingBottom: =8
PaddingLeft: =8
PaddingRight: =8
PaddingTop: =8
Width: =Min(Parent.Width - If(App.Width < 640, 24, 48), 1200)
Children:
- lblProjectsHeader_2:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(75, 85, 99, 1)
PaddingLeft: =0
Size: =18
Text: ="Inventory Items"
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Bold
Width: =Parent.Width
Wrap: =false
X: =32
Y: =38
- ButtonCanvas2:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Subtle
FontColor: =RGBA(15, 108, 189, 1)
Icon: ="ArrowRight"
Layout: ='ButtonCanvas.Layout'.IconAfter
LayoutMinHeight: =16
LayoutMinWidth: =16
Text: ="View All "
Width: =120
- conToolbar_2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =If(ctxShowFilter, 110, 60)
LayoutDirection: =LayoutDirection.Vertical
PaddingBottom: =8
PaddingLeft: =12
PaddingRight: =12
PaddingTop: =8
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 24, 48), 1200)
Children:
- conSearchRow_3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
FillPortions: =0
Height: =44
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
Children:
- cmpFilterBadge_4:
Control: CanvasComponent
ComponentName: Badge
Properties:
AlignInContainer: =AlignInContainer.Center
BadgeColor: =RGBA(37, 99, 235, 1)
BadgeCount: =If(IsBlank(varStatusFilter), 0, 1)
HasNotifications: =!IsBlank(varStatusFilter)
Height: =32
HoverText: '=If(IsBlank(varStatusFilter),"Toggle Filters", If(IsBlank(varStatusFilter), 0, 1)&" Filter selcted") '
IconColor: =
IconSvg: |-
="<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='" &
If(ctxShowFilter, "#2563EB", "#6B7280") &
"' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>" &
"<path d='M15.735 8.266a1.757 1.757 0 1 0 0-3.513 1.757 1.757 0 0 0 0 3.513m4.391-1.757H17.93m-4.393 0H3.875m10.979 12.738a1.757 1.757 0 1 0 0-3.515 1.757 1.757 0 0 0 0 3.515M3.875 17.491h8.784m4.391 0h3.075M8.267 13.757a1.757 1.757 0 1 0-.001-3.513 1.757 1.757 0 0 0 .001 3.513m-4.392-1.756h2.196m4.392 0h9.662'/>" &
"</svg>"
OnSelect: |-
=UpdateContext({ctxShowFilter: !ctxShowFilter})
Size: =40
Theme: ="Light"
Width: =40
- txtSearch_4:
Control: TextInput@0.0.54
Properties:
Fill: =RGBA(243, 244, 246, 1)
FillPortions: =1
FontColor: =RGBA(17, 24, 39, 1)
FontSize: =18
LayoutMinHeight: =16
LayoutMinWidth: =100
Placeholder: ="Search by title, ID, or assignee..."
TriggerOutput: ='TextInputCanvas.TriggerOutput'.Keypress
Type: ='TextInputCanvas.Type'.Search
- cmpSegmentedControl_2:
Control: CanvasComponent
ComponentName: cmpSegmentedControl
Properties:
DefaultValue: ="table"
Disabled: =false
DisplayMode: ="Both"
EqualWidth: =false
Height: |-
=Switch(
cmpSegmentedControl_2.Size,
"Small", 32,
"Medium", 40,
"Large", 48,
40
)
IconPosition: ="Left"
LayoutMinHeight: =0
LayoutMinWidth: =0
OnChange: =Set(varViewMode, cmpSegmentedControl_2.SelectedValue)
Options: |-
=Table(
{
Value: "list",
Label: "List",
Icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E"
},
{
Value: "card",
Label: "Card",
Icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3C/svg%3E"
},
{
Value: "table",
Label: "Table",
Icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3C/svg%3E"
}
)
Size: ="Small"
Theme: ="Light"
Visible: =App.Width >= 1024
Width: |-
=If(
cmpSegmentedControl_2.DisplayMode = "Icons" && !cmpSegmentedControl_2.EqualWidth,
Switch(cmpSegmentedControl_2.Size, "Small", 32, "Medium", 40, "Large", 48, 40)
* CountRows(cmpSegmentedControl_2.Options) + 4,
cmpSegmentedControl_2.DisplayMode = "Text",
Switch(cmpSegmentedControl_2.Size, "Small", 72, "Medium", 88, "Large", 104, 88)
* CountRows(cmpSegmentedControl_2.Options) + 4,
Switch(cmpSegmentedControl_2.Size, "Small", 96, "Medium", 112, "Large", 132, 112)
* CountRows(cmpSegmentedControl_2.Options) + 4
)
- cmpStatusChips_2:
Control: CanvasComponent
ComponentName: cmpChips
Properties:
CharWidths: |-
=Table(
{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:" ",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"!",Size:0.408},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"A",Size:0.892},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"B",Size:0.808},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"C",Size:0.792},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"D",Size:0.958},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"E",Size:0.692},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"F",Size:0.673},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"G",Size:0.931},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"H",Size:0.981},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"I",Size:0.392},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"J",Size:0.492},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"K",Size:0.815},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"L",Size:0.654},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"M",Size:1.235},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"N",Size:1.023},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"O",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"P",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Q",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"R",Size:0.831},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"S",Size:0.727},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"T",Size:0.762},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"U",Size:0.938},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"V",Size:0.858},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"W",Size:1.288},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"X",Size:0.823},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Y",Size:0.773},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Z",Size:0.785},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"a",Size:0.696},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"b",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"c",Size:0.627},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"d",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"e",Size:0.712},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"f",Size:0.462},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"g",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"h",Size:0.777},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"i",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"j",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"k",Size:0.7},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"l",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"m",Size:1.181},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"n",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"o",Size:0.796},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"p",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"q",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"r",Size:0.496},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"s",Size:0.573},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"t",Size:0.485},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"u",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"v",Size:0.677},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"w",Size:1.012},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"x",Size:0.669},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"y",Size:0.681},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"z",Size:0.619}
)
ChipType: ="choice"
Color: ="primary"
Config: |-
={Theme: Lower("Light"), Wrap:false, Closable:false, Disabled:false, Radius:99, Gap:8, MaxVisible:10}
CustomColors: ={primary:"",secondary:"",success:"",warning:"",error:""}
Height: =Switch(Self.Size, "x-small", 38, "small", 44, "large", 56, "x-large", 62, 50)
Icons: ={Prepend:"",Check:"✓"}
Items: =colStatusChips
OnClose: =
OnOverflow: =
OnSelect: |-
=UpdateIf(
colStatusChips,
id = cmpStatusChips_2.SelectedItem.id,
{selected: !selected}
)
Size: =If(App.Width < 640,"small","large")
Variant: ="tonal"
Visible: =ctxShowFilter
Width: =Parent.Width - 24
- conProjectsCard_2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 1)
Height: =
LayoutDirection: =LayoutDirection.Vertical
LayoutMinHeight: =250
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 24, 48), 1200)
Children:
- cmpMyTable_3:
Control: CanvasComponent
ComponentName: cmpMyTable
Properties:
AlignInContainer: =AlignInContainer.Stretch
CharWidths: |-
=Table(
{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:" ",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"!",Size:0.408},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"""",Size:0.585},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"#",Size:0.788},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"$",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"%",Size:1.123},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"&",Size:0.954},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"'",Size:0.346},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"(",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:")",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"*",Size:0.581},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"+",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:",",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"-",Size:0.538},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:".",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"/",Size:0.554},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"0",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"1",Size:0.538},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"2",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"3",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"4",Size:0.769},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"5",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"6",Size:0.746},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"7",Size:0.715},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"8",Size:0.742},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"9",Size:0.746},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:":",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:";",Size:0.323},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"<",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"=",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:">",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"?",Size:0.592},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"@",Size:1.273},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"A",Size:0.892},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"B",Size:0.808},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"C",Size:0.792},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"D",Size:0.958},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"E",Size:0.692},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"F",Size:0.673},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"G",Size:0.931},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"H",Size:0.981},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"I",Size:0.392},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"J",Size:0.492},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"K",Size:0.815},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"L",Size:0.654},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"M",Size:1.235},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"N",Size:1.023},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"O",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"P",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Q",Size:1.008},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"R",Size:0.831},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"S",Size:0.727},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"T",Size:0.762},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"U",Size:0.938},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"V",Size:0.858},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"W",Size:1.288},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"X",Size:0.823},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Y",Size:0.773},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"Z",Size:0.785},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"[",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"]",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"^",Size:0.927},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"_",Size:0.55},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"`",Size:0.388},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"a",Size:0.696},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"b",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"c",Size:0.627},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"d",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"e",Size:0.712},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"f",Size:0.462},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"g",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"h",Size:0.777},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"i",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"j",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"k",Size:0.7},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"l",Size:0.35},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"m",Size:1.181},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"n",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"o",Size:0.796},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"p",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"q",Size:0.804},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"r",Size:0.496},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"s",Size:0.573},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"t",Size:0.485},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"u",Size:0.781},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"v",Size:0.677},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"w",Size:1.012},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"x",Size:0.669},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"y",Size:0.681},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"z",Size:0.619},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"{",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"|",Size:0.369},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"}",Size:0.446},{CharFont:Font.'Segoe UI',CharWeight:FontWeight.Semibold,Char:"~",Size:0.927}
)
ContextMenuItems: |-
=Table(
{ItemKey: "view", ItemDisplayName: "View", ItemIconSvg: "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>", ItemIconColor: "60,60,60,1", ItemEnabled: true, ItemVisible: true},
{ItemKey: "edit", ItemDisplayName: "Edit", ItemIconSvg: "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>", ItemIconColor: "60,60,60,1", ItemEnabled: true, ItemVisible: true},
{ItemKey: "delete", ItemDisplayName: "Delete", ItemIconSvg: "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><path d='M3 6h18'/><path d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/><path d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/></svg>", ItemIconColor: "248,113,113,1", ItemEnabled: true, ItemVisible: true}
)
EnableHover: =true
EnableMenu: =true
FillPortions: =1
Height: =Parent.Height
Items: |-
=With(
{selectedChips: Filter(colStatusChips, selected)},
Filter(
colItems,
(IsBlank(txtSearch_4.Value) ||
StartsWith(Title, txtSearch_4.Value) ||
StartsWith(CaseID, txtSearch_4.Value) ||
StartsWith(Assignee, txtSearch_4.Value))
&&
(CountRows(selectedChips) = 0 ||
Status in ForAll(selectedChips, label))
)
)
LayoutMinHeight: =0
LayoutMinWidth: =0
OnMenuItemSelect: =
OnRowSelect: =
OnViewChange: =
PriorityConfig: |-
=Table(
{PriorityKey: "high", Background: "254,226,226,1", TextColor: "185,28,28,1"},
{PriorityKey: "medium", Background: "254,243,199,1", TextColor: "146,64,14,1"},
{PriorityKey: "low", Background: "220,252,231,1", TextColor: "22,101,52,1"},
{PriorityKey: "default", Background: "243,244,246,1", TextColor: "75,85,99,1"}
)
ProgressActiveColor: ="2563EB"
ProgressInactiveColor: ="E2E8F0"
ShowHeader: =true
ShowViewToggle: =false
StatusConfig: |-
=Table(
{StatusKey: "active", Background: "212,244,221,1", TextColor: "15,81,50,1"},
{StatusKey: "low stock", Background: "254,243,199,1", TextColor: "146,64,14,1"},
{StatusKey: "inactive", Background: "243,244,246,1", TextColor: "75,85,99,1"},
{StatusKey: "default", Background: "240,240,240,1", TextColor: "96,96,96,1"}
)
ThemeConfig: |-
={
container: {background: "255,255,255,1", border: "229,231,235,1", borderThickness: 1, radius: 12},
header: {background: "255,255,255,1", border: "229,231,235,1", borderThickness: 2, textColor: "75,85,99,1", fontSize: 11, fontWeight: "Semibold", height: 50},
row: {background: "255,255,255,1", hoverBackground: "249,250,251,1", borderColor: "229,231,235,1", borderThickness: 1, height: 60},
card: {background: "255,255,255,1", border: "229,231,235,1", borderThickness: 1, radius: 12, height: 300, gap: 16},
list: {background: "255,255,255,1", border: "229,231,235,1", divider: "243,244,246,1", text: "17,24,39,1", textMuted: "107,114,128,1", radius: 12},
text: {primary: "17,24,39,1", secondary: "75,85,99,1", accent: "37,99,235,1", fontFamily: "Segoe UI", fontSizeNormal: 12, fontSizeSmall: 11, fontWeightNormal: "Normal", fontWeightBold: "Semibold"},
spacing: {paddingLeft: 20, paddingTop: 16, columnGap: 10}
}
ViewMode: |
= If(App.Width < 640,"list",varViewMode)
Width: =Parent.Width
- cntBottomBar_7:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =If(App.Width < 640, Color.Transparent, RGBA(229, 231, 235, 1))
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =If(App.Width < 640, Color.Transparent, RGBA(255, 255, 255, 1))
FillPortions: =0
Height: =If(App.Width < 640, 56, 72) +5
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =3
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
LayoutMaxHeight: =If(App.Width < 640, 56, 72)
LayoutMaxWidth: =
LayoutMinHeight: =If(App.Width < 640, 56, 72)
PaddingBottom: =12
PaddingTop: =4
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =App.Width < 640 || App.Width >= 640 && App.Width < 1024
Children:
- cmpBottomNavigation_8:
Control: CanvasComponent
ComponentName: cmpBottomNavigation
Properties:
ActiveColor: =RGBA(59, 130, 246, 1)
ActiveColorHex: ="3B82F6"
ActiveIndicator: ="underline"
BadgeColor: =RGBA(220, 38, 38, 1)
Fill: =If(App.Width < 640,Color.Transparent,RGBA(255, 255, 255, 1))
Height: =Parent.Height - 10
InactiveColorHex: ="6B7280"
Items: |-
=Table(
{Index: 1, Icon: "home", Label: "Home", Badge: 0},
{Index: 2, Icon: "search", Label: "Search", Badge: 0},
{Index: 3, Icon: "bell", Label: "Alerts", Badge: 4},
{Index: 4, Icon: "user", Label: "Profile", Badge: 0}
)
OnSelect: |-
=Switch(cmpBottomNavigation_8.SelectedItemIndex,
1, Navigate(scrAppHome, ScreenTransition.None),
2, Navigate(scrAppHome, ScreenTransition.None),
3, Notify("Add new project coming soon", NotificationType.Information),
4, Set(varThemeName, If(true, "Dark", "Light"));
ClearCollect(colThemePref, {name: varThemeName});
IfError(SaveData(colThemePref, "nf_theme"), Blank())
);
Set(varActiveTab, cmpBottomNavigation_8.SelectedItemIndex)
SelectedIndex: =varActiveTab
ShowLabels: ="always"
Theme: ="Light"
Width: =Parent.Width
- htmlBackgroundBlur_8:
Control: HtmlViewer@2.1.0
Properties:
DisabledBorderColor: =RGBA(56, 56, 56, 1)
Font: =Font.'Open Sans'
Height: =Parent.Height
HtmlText: |-
="<div style='
display:block;
width:" & Self.Width & "px;
height:" & Self.Height - 1 & "px;
background:RGBA(0, 0, 0, 0.3);
backdrop-filter: blur(6px);
'></div>"
OnSelect: =Set(varNavOpen, false)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Visible: =App.Width < 1024 && varNavOpen
Width: =Parent.Width
- cntLeftNavHost_6:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(255, 255, 255, 1)
Height: =Parent.Height
Visible: =App.Width >= 1024 || varNavOpen
Width: =cmpSidebar_1.Width
Children:
- cmpSidebar_1:
Control: CanvasComponent
ComponentName: cmpSidebar
Properties:
AccentColor: =RGBA(79, 142, 247, 1)
AppLogo: =Blank()
AppName: ="Inventory Manager"
AppNameAccent: =
Expanded: =true
Height: =App.Height
Icons: |-
=Table(
{Name:"Grid", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>"},
{Name:"Layers", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 17l10 5 10-5'/><path d='M2 12l10 5 10-5'/></svg>"},
{Name:"File", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>"},
{Name:"User", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"},
{Name:"Settings", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"},
{Name:"Home", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"},
{Name:"Dashboard", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/></svg>"},
{Name:"Bell", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>"},
{Name:"Chart", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='20' x2='18' y2='10'/><line x1='12' y1='20' x2='12' y2='4'/><line x1='6' y1='20' x2='6' y2='14'/></svg>"},
{Name:"Users", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"},
{Name:"Database", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/><path d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/></svg>"},
{Name:"Box", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.29 7 12 12 20.71 7'/><line x1='12' y1='22' x2='12' y2='12'/></svg>"},
{Name:"Shield", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"},
{Name:"Code", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>"},
{Name:"Help", SVG:"<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"}
)
Items: |-
=Table(
{ID:1, Title:"Home", Icon:"Home", Letter:"", Badge:0, BadgeColor:RGBA(0,0,0,0), BadgeDot:false, IsSection:false, ParentID:-1, Visible:true},
{ID:2, Title:"Inventory", Icon:"Layers", Letter:"", Badge:3, BadgeColor:RGBA(239,68,68,1), BadgeDot:false, IsSection:false, ParentID:-1, Visible:true},
{ID:3, Title:"Reports", Icon:"File", Letter:"", Badge:1, BadgeColor:RGBA(34,197,94,1), BadgeDot:true, IsSection:false, ParentID:-1, Visible:true},
{ID:10, Title:"", Icon:"", Letter:"", Badge:0, BadgeColor:RGBA(0,0,0,0), BadgeDot:false, IsSection:true, ParentID:-1, Visible:true},
{ID:4, Title:"Settings", Icon:"Settings", Letter:"", Badge:0, BadgeColor:RGBA(0,0,0,0), BadgeDot:false, IsSection:false, ParentID:-1, Visible:true}
)
OnFooterSettings: =""
OnHelp: =""
OnNavSelect: =""
OnThemeToggle: =Set(varThemeName,If(true,"Dark","Light"))
OnToggle: =""
ShowFooterMenu: =true
ShowHeader: =true
ShowSearch: =false
ShowToggle: =true
ShowUser: =true
Theme: =If(true,"Dark","Light")
Width: =If(_cmpNavIsExpanded, 260, 64)
- cmpFloatingActionButton_4:
Control: CanvasComponent
ComponentName: cmpFloatingActionButton
Properties:
Color: =RGBA(37, 99, 235, 1)
Disabled: =false
Fill: =Color.Transparent
Height: |-
=With(
{
_fabSize: Switch(
cmpFloatingActionButton_4.Size,
"small", 40,
"regular", 56,
"large", 72,
56
)
},
If(
_fabOpen && CountRows(cmpFloatingActionButton_4.SpeedDialItems) > 0,
_fabSize + 12 + CountRows(cmpFloatingActionButton_4.SpeedDialItems) * cmpFloatingActionButton_4.ItemSize,
_fabSize
)
)
Icon: ="add"
IconColor: ="#FFFFFF"
ItemSize: =52
Label: ="New Report"
OnSelect: =false
OnSpeedDialSelect: |-
=Switch(
Self.SelectedSpeedDialItem.Label,
"New Item", Notify("Add new item coming soon", NotificationType.Information)
)
Size: ="regular"
SpeedDialItems: |-
=Table(
{Icon: "Plus", Label: "New Item", Color: RGBA(37, 99, 235, 1)}
)
Style: ="standard"
Theme: ="Light"
Visible: =App.Width < 640
Width: |-
=With(
{
_fabSize: Switch(
cmpFloatingActionButton_4.Size,
"small", 40,
"regular", 56,
"large", 72,
56
),
_circleOffset: 20 + Switch(
cmpFloatingActionButton_4.Size,
"small", 20,
"regular", 28,
"large", 36,
28
),
_maxLabelChars: If(
CountRows(cmpFloatingActionButton_4.SpeedDialItems) > 0,
Max(cmpFloatingActionButton_4.SpeedDialItems, Len(Label)),
0
),
_iconSize: Switch(
cmpFloatingActionButton_4.Size,
"small", 20,
"regular", 24,
"large", 36,
24
)
},
If(
_fabOpen && CountRows(cmpFloatingActionButton_4.SpeedDialItems) > 0,
Min(Min(_maxLabelChars * 8 + 64, 240) + Switch(cmpFloatingActionButton_4.Size, "small", 20, "regular", 28, "large", 36, 28) + 20, App.Width),
If(
cmpFloatingActionButton_4.Style = "extended",
16 + _iconSize + 8 + Min(Len(cmpFloatingActionButton_4.Label) * 8, 220) + 20,
_fabSize
)
)
)
X: =Parent.Width - Self.Width - If(App.Width < 640, 24, 24)
Y: =Parent.Height - Self.Height - (If(App.Width < 640, 24, 24) + 45)
- Container4_1:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Visible: =!varLoadComplete
Width: =Parent.Width
Children:
- cmpLoadingScreen_2:
Control: CanvasComponent
ComponentName: cmpLoadingScreen
Properties:
AccentColor: =RGBA(79, 142, 247, 1)
AppName: ="Inventory Manager"
AppNameAccent: =
AppSubtitle: ="Stock Management"
AppVersion: ="v1.0"
CompanyName: ="powerappsui.com"
CurrentStep: =0
ErrorMessage: =""
Height: =Parent.Height
LoadingSteps: |-
=Table(
{msg: "Loading configuration…" },
{msg: "Connecting to SharePoint…"},
{msg: "Loading rate tables…" },
{msg: "Preparing workspace…" }
)
LogoLetter: ="IM"
MinDisplayTime: =1000
OnReady: =
Theme: ="Light"
Width: =Parent.Width
How It Works
1varTheme drives the entire design system
A single Set(varTheme, {...}) call on Screen.OnVisible builds a record with colors, spacing tokens, font sizes, breakpoints, and responsive height values. Every control reads from varTheme instead of hard-coded values, so changing one record changes the entire UI.
Set(varTheme, {
colors: { pageBg: ColorValue("#F9FAFB"), ... },
tokens: { space: {xs:4, sm:8, md:12, lg:16}, ... },
isMobile: App.Width < 640,
isDesktop: App.Width >= 1024
})2KPI cards pull from colKPI collection
ClearCollect(colKPI, Table(...)) populates a 4-row collection with icon, value, label, percent change, and colors. The cmpKPI component reads colKPI and renders responsive cards. Swap the hard-coded Table() for a SharePoint list to go live.
ClearCollect(colKPI, Table(
{ID:1, Icon:"Box", Value:1247, Label:"Total Items",
PercentChange:12, IconBg:"#EBF5FF", IconColor:"#2196F3"}
))3Data table integrates search, chips, and segmented control
txtSearch filters rows by title/ID/assignee. cmpChips renders colStatusChips for status filtering (varStatusFilter). cmpSegmentedControl toggles varViewMode between table/list/card. The cmpMyTable component combines all three inputs into its Items and ViewMode properties.
// Chips OnSelect:
Set(varStatusFilter,
If(cmpStatusChips.SelectedItem.label = "All",
"", cmpStatusChips.SelectedItem.label))
// Segmented OnChange:
Set(varViewMode, cmpSegmentedControl.SelectedValue)Customization
Change KPI data
Edit the colKPI ClearCollect in the Init tab. Each record has ID, Icon, Value, Label, PercentChange, PercentLabel, IconBg, and IconColor. Add or remove rows to change the number of cards. The cmpKPI component auto-wraps based on count.
Connect to SharePoint or Dataverse
Replace the hard-coded Table() in cmpMyTable.Items with your data source. Map column names (CaseID, Title, Status, Priority, Assignee, DueDate) to your list columns. The table, search, and chip filters work the same way against live data.
Switch between light and dark themes
The sidebar OnThemeToggle flips varThemeName between "Light" and "Dark". Create a second varTheme record with dark color values and swap with: Set(varTheme, If(varTheme.isLight, darkThemeRecord, lightThemeRecord)). All controls update automatically.
Customize the sidebar navigation
Edit the Items table in cmpSidebar to add, remove, or reorder nav items. Each row has ID, Title, Icon, Badge, and ParentID. Set ParentID to create nested items. Wire OnNavSelect to navigate to your screens.
Adjust responsive breakpoints
varTheme.isMobile, isTablet, and isDesktop are computed from App.Width. Change the thresholds (640, 1024) in the Set(varTheme) call. Heights like topBar, toolbar, and fab also adapt — edit the If() expressions in varTheme.heights.
Community
Use the toolbar to format · or type markdown directly