Canvas App Introduction :
Sign in to the Canvas app from the Power app. Create the left side menu with the help of canvas app.
Click on the create button, then select the Blank App, and finally click on the create button. Enter app a name click the create button .
STEP:1
About Components are essentially just reusable building blocks that you may use once in your components or multiple times by creating them in a component library Screen.
click on the Components to create the menu .
STEP:2
Add Components Rename this component is (Left Menu) change the size of the width is 150 and height is 768
STEP:3
Select the insert a blank vertical gallery.
Click the X position and change the FX (0)
Click the Y position and change the FX (0)
Set the gallery Width FX Parent.Width
Set the gallery Height FX Parent.Height
Scrollbar is off
STEP:4
Click on the Left Menu component. Right side click the New custom property change Display name MenuItems then Automatic Name change as MenuItems, Description Nav menu, property types choose Input , Data type is select the Table
STEP:5
Select the MenuItems is input property it has given sample in a table so change this FX given the below
Table(
{
MenuText: “Home”,
MenuIcon: Icon.Home,
NavigateToScreen: Screen1
},{
MenuText: “Add”,
MenuIcon: Icon.Add,
NavigateToScreen: Screen2
},{
MenuText: “My Request”,
MenuIcon: Icon.Document,
NavigateToScreen: Screen3
},{
MenuText: “All Request”,
MenuIcon: Icon.DocumentWithContent,
NavigateToScreen: Screen4
}
)
STEP:6
Click on the Gallery2 then select Items change FX is Left Menu.MenuItems
STEP:7
In Gallery2 add some controls Insert the Text Label1,Icon ADD,Rectangle1,Button2 .
Click All control changing X property FX parent.X.
Y property FX is parent.Y .
Height FX is Gallery2 .TemplateHeight.
click on Button2 change Width Fx is parent.width.
TemplatePadding is 0
STEP:8
Select Button2 change the color property transparent
STEP:9
Change the size width is 4
color white will select see the below image
STEP:10
click on the Icon FX is ThisItem.MenuIcon
STEP:11
Choose the Text Label property is FX ThisItem.MenuText
In this Label 1 X position FX is Icon 1.Width and FX parent.width-Icon1.width
STEP:12
select the Button 2 in italic then text will be clear.
STEP:13
Click on the Gallery2 change TemplateSize Fx 90
STEP:14
Select the Icon1 and change the Size is 40
STEP:15
click on the Left Menu Components select the custom color
choose the Icon1 color white ,Black or choice
Label change the color it is also choice
Next click on the gallery 2 on select property FX Navigate(ThisItem.NavigateToScreen)
Gallery2 TemplateFill FX If(ThisItem.NavigateToScreen=App.ActiveScreen,RGBA(167, 204, 203, 1)Color.RGBA(234, 187, 242, 0.9))
STEP:16
Select the Screens click on New screen input 4 screens and click on insert click the Custom then choose the Left Menu
Screen color each screen color is different its choices change like above image RGBA
STEP:17
After Insert add screen Left Menu the icon1 is add the screens and click on the Icons ,the screen will be change see the below the image
For any Help or Queries Contact us on info@crmonce.com or +91 9014146800
