Created a custom component for Application Footer as shown below:
The component supports expand and collapse.
You can find the complete overview of the component by visiting my YouTube video (please like, subscribe, share):
https://www.youtube.com/watch?v=8jgH3bycJxU
Component has 4 input parameters and 1 output parameter.
Input Parameters:
1. No. of footer headers: Enter total number of footer headers.
2. Footer Table: This is a nested table with header and child navigation elements. This accepts following format of table:
ClearCollect(
colFooter,
Table(
{
Title: "What's new",
NavigationType: "Screen",
Url: "",
Screen: WhatsNewScreen,
FooterItems: Table (
{
Title: "Surface Duo",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/surface/devices/surface-duo",
ItemScreen: App.ActiveScreen
},
{
Title: "Surface Go 2",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/p/surface-go-2/8PT3S2VJMDR6",
ItemScreen: App.ActiveScreen
},
{
Title: "Surface Book 3",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/p/surface-book-3/8XBW9G3Z71F1",
ItemScreen: App.ActiveScreen
},
{
Title: "Microsoft 365",
NavigationType: "Url",
Url: "https://www.microsoft.com/microsoft-365",
ItemScreen: App.ActiveScreen
}
)
},
{
Title: "Microsoft Store",
NavigationType: "Screen",
Url: "",
Screen: MSStoreScreen,
FooterItems: Table (
{
Title: "Account Profile",
NavigationType: "Url",
Url: "https://account.microsoft.com/",
ItemScreen: App.ActiveScreen
},
{
Title: "Download Center",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/download",
ItemScreen: App.ActiveScreen
},
{
Title: "MS Store Support",
NavigationType: "Url",
Url: "https://go.microsoft.com/fwlink/p/?LinkID=824761&clcid=0x409",
ItemScreen: App.ActiveScreen
}
)
},
{
Title: "Education",
NavigationType: "Screen",
Url: "",
Screen: EducationScreen,
FooterItems: Table (
{
Title: "MS in education",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/education",
ItemScreen: App.ActiveScreen
},
{
Title: "Office for students",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/education/products/office/default.aspx",
ItemScreen: App.ActiveScreen
},
{
Title: "O365 for schools",
NavigationType: "Url",
Url: "https://products.office.com/en-us/academic/compare-office-365-education-plans",
ItemScreen: App.ActiveScreen
},
{
Title: "Deals for students",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/store/b/education?icid=CNavfooter_Studentsandeducation",
ItemScreen: App.ActiveScreen
},
{
Title: "Azure education",
NavigationType: "Url",
Url: "https://azure.microsoft.com/en-us/community/education/",
ItemScreen: App.ActiveScreen
}
)
},
{
Title: "Enterprise",
NavigationType: "Screen",
Url: "",
Screen: EnterpriseScreen,
FooterItems: Table (
{
Title: "Azure",
NavigationType: "Url",
Url: "https://azure.microsoft.com/",
ItemScreen: App.ActiveScreen
},
{
Title: "AppSource",
NavigationType: "Url",
Url: "https://go.microsoft.com/fwlink/?LinkID=808093",
ItemScreen: App.ActiveScreen
},
{
Title: "Automotive",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/enterprise/automotive",
ItemScreen: App.ActiveScreen
}
)
},
{
Title: "Company",
NavigationType: "Screen",
Url: "",
Screen: CompanyScreen,
FooterItems: Table (
{
Title: "Careers",
NavigationType: "Url",
Url: "https://careers.microsoft.com/",
ItemScreen: App.ActiveScreen
},
{
Title: "About Microsoft",
NavigationType: "Url",
Url: "https://www.microsoft.com/en-us/about",
ItemScreen: App.ActiveScreen
},
{
Title: "Company news",
NavigationType: "Url",
Url: "https://news.microsoft.com/",
ItemScreen: App.ActiveScreen
}
)
}
)
)3. Background Color: Footer's background color
4. Font Color: Footer's text font color
Output Parameters:
Footer Height: The component shares the footer height with the Power App screen. This property is useful align your controls on the canvas application along with footer.
I hope my Youtube video provided complete details of the component. Also, I attached the component file with this article. Please feel free to use it and provide me your feedback.
There is lot of scope for improvement for this component but you can use as a starting point.
Regards
Krishna Rachakonda
Twitter: https://twitter.com/rachakonda78
Thank you all MVPs and Super Users of this community for inspiring with your great work and contributions to community.
@heaher_italent @WarrenBelz @KrishnaV @RezaDorrani @mdevaney @RandyHayes @eka24 @PowerAddict @Shanescows
