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

Comments

Popular posts from this blog

People picker Control in PowerApps

Secure When a HTTP request is received Power Automate a.k.a MS Flow

Upload attachment to SharePoint list item using Microsoft Flow

Modern page provisioning using page template

REST call returns XML instead of JSON in SharePoint

HTML field & Date Time formatting in powerapps

Step-By-Step Azure AD App Registration

Approval and auto escalation with time out in Microsoft Flow

Create and configure custom connectors for PowerApps and MSFlow from AzureFunctions