Developing custom reusable components in PowerApps
I am very excited to see the latest PowerApps Experimental preview feature for canvas based PowerApps development & its capabilities. It provides you with the ability to increase your productivity and re-use the same component on all available layouts.
Step2 - Select Advanced Settings-> Experimental feature->Enable Components
The above feature is not listed; then possibly your are not created developer preview environment. Follow these official MSDN instructions.
Also, it's important to understand the Preview & Experimental feature.
Step 1- Click add "New component.
Step 2- Add all necessary controls
-> Image control.
-> Label control to show text.
-> Timer to switch slides.
-> Next & Previous Icons.
Step 3 & 4- Add all necessary custom properties.
-> CustomDataSource - Table Type: This would hold entire data set.
-> Slide Duration - Number: Interval between slides in milliseconds.
-> AutoPlay - Boolean: Auto-play carousel.
-> Start - Boolean: For Manual start.
-> Stop - Boolean: For Manual stop.
-> Show Text - Boolean: Show/Hide text content.
-> Text Fill - Color: Background color for text label.
-> Text Color - Color: Foreground color for text label.
-> Show Navigation - Boolean: Whether or not to show navigation controls.
-> Navigation Fill - Color: Background color for navigation buttons.
-> Navigation Color - Color: Foreground color for navigation buttons.
-> Image Position - Record: For Image position in image control.
Step 5- Set default values.
-> Slide Duration - 3000
-> AutoPlay - true
-> Start - false
-> Stop - false
-> Show Text - true
-> Text Fill - RGBA(0,0,0,0)
-> Text Color - RGBA(0,0,0,1)
-> Show Navigation - true
-> Navigation Fill - RGBA(0,0,0,0)
-> Navigation Color - RGBA(0,0,0,1)
-> Image Position - Fit
-> CustomDataSource
Design & develop it once reuse the component across layouts within PowerApps.
How to enable the experimental feature in PowerApps?
Step1 - Go to File->App Settings.Step2 - Select Advanced Settings-> Experimental feature->Enable Components
Create Carousel reusable component in PowerApps
Step 1- Click add "New component.
Step 2- Add all necessary controls
-> Image control.
-> Label control to show text.
-> Timer to switch slides.
-> Next & Previous Icons.
Step 3 & 4- Add all necessary custom properties.
-> CustomDataSource - Table Type: This would hold entire data set.
-> Slide Duration - Number: Interval between slides in milliseconds.
-> AutoPlay - Boolean: Auto-play carousel.
-> Start - Boolean: For Manual start.
-> Stop - Boolean: For Manual stop.
-> Show Text - Boolean: Show/Hide text content.
-> Text Fill - Color: Background color for text label.
-> Text Color - Color: Foreground color for text label.
-> Show Navigation - Boolean: Whether or not to show navigation controls.
-> Navigation Fill - Color: Background color for navigation buttons.
-> Navigation Color - Color: Foreground color for navigation buttons.
-> Image Position - Record: For Image position in image control.
Step 5- Set default values.
-> Slide Duration - 3000
-> AutoPlay - true
-> Start - false
-> Stop - false
-> Show Text - true
-> Text Fill - RGBA(0,0,0,0)
-> Text Color - RGBA(0,0,0,1)
-> Show Navigation - true
-> Navigation Fill - RGBA(0,0,0,0)
-> Navigation Color - RGBA(0,0,0,1)
-> Image Position - Fit
-> CustomDataSource
Table( { Step: 1, Text: " text 1", ImageSrc: SampleImage }, { Step: 2, Text: " text 2", ImageSrc: SampleImage }, { Step: 3, Text: " text 3", ImageSrc: SampleImage }, { Step: 4, Text: " text 4", ImageSrc: SampleImage }, { Step: 5, Text: " text 5", ImageSrc: SampleImage } )
Let's wireup them in to action
OnTimerStart:If( IsBlank(_step), Set(_step,1), If( _step >= CountRows(Carousel.CustomDataSource), Set(_step,1), Set(_step,_step + 1) ) );Set(_carouselTimerReset,false)Duration:
Select Image control
LookUp(Carousel.CustomDataSource, Step = _step).ImageSrcWidth x Height
Select Label control
Text:
Fill & Text Color:
Y:
Select Navigation icon control
Next & Previous Fill color:
Color:
Next icon:
X:
Next & Previous icon
Y:
Final output
I am thrilled to see what's next feature it offers in component development. Also, since its a preview program feel free to post your suggestion and feedback or ideas in PowerApps ideas portal.
Happy coding Poweruser 😊
Regards
Ratsub
Comments
Post a Comment
Enter your comments..