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. 

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


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.

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).ImageSrc

Width 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

However, there is some limitation as per this MSDN link.

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