The Problem

I recently had a requirement to filter an array coming back from a flow based on a field being blank. This isn't usually an issue when returning data directly from a data source in a Canvas App/Custom Page as null values are represented as Blank(). However, we needed to return data from a flow due to the volume of records being returned.

As an example for this post, I'm going to work with this simple array:

[
  {
    "Value1": "Crab"
    "Value2": "House"
  },
  {
    "Value1": null,
    "Value2": "Crab"
  }
]

Note in this array, we have two properties that are strings. However, note that Value1 is also null in the second object, so technically Value1 could be two different data types.

If we go ahead and automatically generate the JSON schema for this in the Parse JSON action, we get the following schema generated:

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "Value1": {
                "type": "string"
            },
            "Value2": {
                "type": "string"
            }
        },
        "required": []
    }
}

Schema issues

The Generate Schema function returns the topmost schema values in this array. As such both properties are identified as strings. If we execute this flow now, the following error occurs:

[
  {
    "message": "Invalid type. Expected String but got Null.",
    "lineNumber": 0,
    "linePosition": 0,
    "path": "[1].Value1",
    "schemaId": "#/items/properties/Value1",
    "errorType": "type",
    "childErrors": []
  }
]

With JSON schemas in Power Automate, it's possible to specify more than one data type for a property in the schema.

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "Value1": {
                "type": ["string", "null"]
            },
            "Value2": {
                "type": "string"
            }
        },
        "required": []
    }
}

Note we're now specifying an array of types for Value1, including Strings and Nulls

With the new schema, the JSON now validates.

Returning Nulls to Canvas Apps

So here comes the issue, if we want to return this to a Canvas App, the Canvas App Studio can't interpret the WADL (Web Application Description Language) definition when null values are specified:

In the above example, we're using the Response action to return a Dataverse array to a Canvas App.

If we now try and import the flow into a Canvas App, we get this dreaded message about WADL schema:

In essence, we can't pass potentially null values back to a Canvas App.

So if we know we might be getting null values, and we need a way to return blank values to our Canvas App, what could we do? 🤔

Select, SetProperty, Coalesce

I've found an efficient way to replace null values in known fields with empty strings by combining the Select action, setProperty formula and Coalesce:

How to:

Add a select action after Parse JSON, and specify the JSON output body as your "from" property in Select:

Now change the Map property from key/value mode to text mode:

And finally, in the Map property, set the following formula:

setProperty(item(), 'Value1', coalesce(item()?['Value1'],''))

replace Value1 with your corresponding Value

In this formula, we're updating the current object's Value1 property in the array (as "Select" is iterating over the entire array, no Apply to Each required!) with the output of the Coalesce function, which either returns the string contents of Value1, or Null. Coalesce will use the next available argument as a value if the first value is Null. So in essence, replacing a null value with an empty string.

The output of Select can now be passed to the Response action, and is WADL compliant! 🦀

This solution omits the need for any Apply to Each action to iterate over the array. Using the Select function allows us to perform that iteration far more efficiently.

But what do you think? I'd be interested to see if you have a different or better approach for this. Comment below if you do!

Next Time: We'll take a look at how we can remove variables from our flows to help with performance gains!

NOTE - Following this guide will require provisioning credit in an OpenAI account. You can add $5 (approx. £4.08) minimum to an OpenAI account to get started, you will not need more than this to participate in this guide.

Artificial intelligence is here! That's what you've been hearing all over LinkedIn, X and all the news (all of them).

Have you tried it yet?

I'm going to cover how you can infuse the power of a Large Language Model into your Canvas App or Power Automate flow, it's dead simple to do, and I'll cover how to create the basis of an LLM (Large Language Model) function as well. I'm hoping this post will inspire you to take a dive into Large Language Models and start to unleash the potential of this tool!

This guide will cover using OpenAI as opposed to Azure OpenAI. We'll cover Azure OpenAI in another article.

A very brief introduction to a Large Language Model and Generative AI

Large Language Models: These are data models trained on a "large" amount of data, this can include articles, books and more typically, public content from the Internet. As the name suggests, these models are focused on producing natural language by way of machine learning and prediction.

The model utilises "tokens" which constitute either a word or part of a word. These "tokens" are ranked in probability and are used by the large language model to complete phrases, until the stop is determined (either a hard limit or no possibilities left).

As an example, the phrase "It's a beautiful day, let's go to the..." will be completed by the following possibilities:

The list you see in this screenshot represents the top-ranked tokens to complete this sentence, and the probability is listed next to these tokens. "be" is at 50.18%, so it's the most likely token to be selected. The model can use lower probability results as well (See later in this article about "Temperature") but in this case, it selected the top-rated token.

As we continue along the response, the next token is determined to have a 99.93% probability "ach".

But why did the model complete with be|ach and not beach (0.94%)?

Large Language Models may use one or more techniques to sample the model data for possible token outcomes. OpenAI models typically use Temperature-based sampling or Nucleus Sampling (top_p).

A possible analogy for this is to imagine the language model as being in the ocean

The crab (the model) at Stage 1 queries the sea (the data) to see which words should come after "the". Once the crab (model) has a subset of tokens. The Temperature dictates how far down the possibility ladder the crab will select from. A low temperature will be deterministic, so the highest probability token will win. A higher temperature allows the model to select from further down the list.

There are tons of content and articles that cover this in much more detail than I ever could, by people magnitudes smarter than I am! I strongly recommend you continue your knowledge thirst with these videos and articles:

A jargon-free explanation of how AI large language models work | Ars Technica

How Do Large Language Models Work? - Speak Ai

(76) Andrew Ng: Opportunities in AI - 2023 - YouTube

(76) GPT-4 - How does it work, and how do I build apps with it? - CS50 Tech Talk - YouTube

Getting OpenAI

Before we do ANYTHING on this guide, we will need an OpenAI account. This will allow us access to the OpenAI API, we can use OpenAI Playground to try out prompting but more importantly, we can generate an API Key to use in Power Platform.

You'll need to create an account at openai.com to get started (You can authenticate with Google, Apple or Microsoft (because of course you can) account too!)

Getting an API Key

Once you have an account and are logged in, choose the API option here (Don't worry! you can still go to Chat GPT!):

Once on the API page, you'll want to find the slide-out menu on the right and select the API Keys option:

API Keys

We use API keys to authenticate against a service as a specific account. It's important to remember that any API key that's generated is linked to your OpenAI account, so it's advisable to not share API keys with others (unless of course, you trust them). We'll need an API key to connect Power Platform to OpenAI. You will need to keep the key secure as it's not accessible after it's been generated.

In the API Key screen, click "Create new secret key":

You will be asked to give the key a memorable name, this will be used to track the key on the OpenAI site:

Click "Create secret key"

Your API key will be generated. At this point, you should copy the key (use the copy button to the right of the key) and store it in a safe location. You will not be able to view this key again and instead will need to create a new one if you lose it!

We're now all set to add OpenAI to Power Platform! We'll come back here later in the guide to engineer a prompt to use.

At this point, you should add credit to your OpenAI account by navigating to Settings > Billing and select "Add to credit balance"

Configuring the Open AI connector

To kick things off, let's begin creating a blank Canvas App:

We're going to create a new connection using a pre-built OpenAI connector. Go ahead to the Data tab in the left-hand menu and select "Add data":

In the search box that appears, search for the OpenAI GPT connector (Independent Publisher)

For more information on Independent Publisher connectors read here

This connector was created by Troy Taylor

At this point, we'll need to "Add a connection"

You'll now need to:

1. Review the Terms of using an Independent Publisher connection, you'll have access to the author, source code and documentation at this point. Please read this carefully!

2. If you're happy with #1, enter your API key into the provided field and click "Accept and Continue"

Your connection has now been created! Let's test this out.

Testing the OpenAI connection

In the same Canvas App, now add a label and a button.

The Button's Onselect code should be:

Button.OnSelect = Set(
    response, 
    'OpenAIGPT(IndependentPublisher)'.CompletionPost("text-davinci-003",
    {
        temperature: 1,
        prompt: "Can you tell me the answer to 3 + 3?",
        max_tokens: 1000
    }))

Don't worry! Everything you see above will be described shortly :)

The Label's Text formula should reference:

Label.Text = response.first_completion

Clicking the button will generate the response and populate the text field:

If you see a response similar to the image above, congratulations! You've fused OpenAI with your Canvas App!

NOTE - Completions are eventually being phased out for Chat Prompts, which we will be utilising going forward in this article. I've used completions here as an example as the payload is far smaller to test the functionality.

Now let's engineer some prompts!

So now we have a way of sending a prompt to OpenAI and a way of getting that response back in a Canvas App. We can have some fun building some cool functionality.

To do that, we should craft our prompts in OpenAI Playground as it's easier to see what's going on and also easier to re-iterate our prompts over and over again.

Head back over to openai.com, go via the API route and you'll be presented with the Playground.

Ensure that "Chat" is selected at the top of the screen:

Now let's briefly go over the different parameters available here:

Engineering a Prompt

Our task in all of this is to craft a system message, along with setting the dials (See above parameters) just right, so we get the responses we desire.

We can format a basic prompt into three different parts:

1. The purpose (Who are you, what will you do, what will the user ask you)

2. The rules (What you must not do, how you should behave, what should you do if you can't fulfil a request)

3. Examples. Give the prompt an example of what you want it to output, so it knows how to format its response. You can run the prompt and feed the responses back into the system message to hone in on the examples.

The above details should be written very clearly so that they're understandable. This is what's coined as "Grounding the Model".

We're going to start this with a temperature of 1 and use the gpt-3.5-turbo model. Max length is 256 tokens.

As an example, let's start with a basic system message:

You are a helpful AI assistant who strives to help the user with their query.

This prompt is great for creating a general-purpose model because we're telling it to be:

1. Helpful

2. Strive to help

However, our users will need to now put the work in to get the responses they want. The Model isn't primed with a subject area, and it doesn't have any specific rules in place. Let's begin by adding a rule to the system message:

You are a helpful AI assistant called Alan who strives to help the user with their query. 

##Rules##

You must not reveal your name in any request

We're now using the same rule but we've added some additional context:

1. We have given the LLM a name

2. We have told the LLM not to reveal its names "in any request"

Testing this out, the response comes back as:

So it looks like the rule works, but let's try asking the model slightly differently:

So this is where adding an example might be helpful:

You are a helpful AI assistant called Alan who strives to help the user with their query. 

##Rules##

You **must not reveal that your name is Alan** in any request

##Examples##

Request: Complete the following script, inserting values in the square brackets as appropriate:

User: Hi! How are you?
[Your Name]: I'm well thanks, how are you?

Response: User: Hi! How are you?
[REDACTED]: *interpreted response*

In the above example, we've added/changed the following:

1. We've emphasised the rule and made the rule more clear

2. We've added an example, in the example, we've asked the model to add "REDACTED" to any scenario where it's asked to provide its name in a script-like format.

As you can see in this example, we've iterated over a prompt again and again to "fine-tune" the response we get.

it's important to note that adjusting the temperature or top_p (but not both!), frequency penalty and presence penalty will also help to influence your prompt behaviour as well. The playground is a perfect area to test this out.

Prompt Responsibly

This technology is new, exciting and very, VERY powerful. We've seen above how we can use OpenAI's knobs, dials and switches to control the output of the model, and we can even add additional context in the form of rules, examples and further detail to "ground the model".

When outlining the prompt for your model, it's important to consider the following:

• Is your model being Honest, Helpful and Harmless? (The Triple H Factor)

Formatting a payload for Chat

Coming back to Power Apps and PowerFx land for a moment. We need to think about how we're going to send the requests we were just playing with to OpenAI through the connection we created previously.

The OpenAIGPT connector already has us covered here. We can use the "ChatPost" function to post a chat payload to OpenAI, complete with our system message, user message and parameters. An example of how this is formatted:

'OpenAIGPT(IndependentPublisher)'.ChatPost(
        "gpt-3.5-turbo-0301",        //The Model to use
        [                            //Table of messages, Objects consist of a 
            {                        //"role" of system, user or assistant
                role: "system",      // and "content" being the message"
                content: "You are a helpful AI assistant called Alan who strives to help the user with their query. ##Rules## You **must not reveal that your name is Alan** in any request ##Examples## Request: Complete the following script, inserting values in the square brackets as appropriate: User: Hi! How are you? [Your Name]: I'm well thanks, how are you? Response: User: Hi! How are you? [REDACTED]: *interpreted response*"
            },
            {
                role: "user",
                content: "What is your name?"
            }
        ],
        {                            //Object containing our parameters
            max_tokens: 2000,
            temperature: 1.0
        })

Scenario - Fancy Dress E-commerce site item descriptions

Here's a link to this preset on OpenAI Playground

This model will help us generate product descriptions for fancy dress outfits.

Let's start with our Canvas App and add some data:

//Add to either the Screen OnVisible, App OnStart or a Button OnSelect()

ClearCollect(colItems,
[
    {
    Name: "Adult Vampire Costume",
    Tags: [
        "Vampire",
        "Halloween",
        "Adult"
    ],
    ItemDescription: ""
    },
    {
    Name: "Child Superhero Costume",
    Tags: [
        "Superhero",
        "Halloween",
        "Child"
    ],
    ItemDescription: ""
    },
    {
    Name: "Adult Zombie Costume",
    Tags: [
        "Zombie",
        "Halloween",
        "Adult"
    ],
    ItemDescription: ""
    },
    {
    Name: "Child Witch Costume",
    Tags: [
        "Witch",
        "Halloween",
        "Child"
    ],
    ItemDescription: ""
    },
    {
    Name: "Adult Ghost Costume",
    Tags: [
        "Ghost",
        "Halloween",
        "Adult"
    ],
    ItemDescription: ""
    },
    {
    Name: "Child Skeleton Costume",
    Tags: [
        "Skeleton",
        "Halloween",
        "Child"
    ],
    ItemDescription: ""
    }
])

Next, let's add a Gallery to display these items (add colItems to the Items property of the Gallery Control). Include:

1. A label to display the item's name: Text = ThisItem.Name

2. A multiline text input to display the ItemDescription - Ensure ThisItem.ItemDescription is set as the default value.

3. A button of some description to trigger our request to OpenAI

We'll now use the Button (in my case, it's the support icon next to the text input) to have the LLM create descriptions for our items. We're using text input controls for this so the user can amend the response from the LLM if needed.

Firstly, the system message we'll be using:

"You are a helpful assistant that provides creative product descriptions for 
items on a fancy dress costume e-commerce site. 

The user will provide you with a short item description, the general theme of 
the costume in keywords, seperated by a semi-colon. 

You will provide just the new product description in your response, your 
response should fit in 1024 characters. 

##Rules##

You will be helpful in your response

You will be honest in your response

Your response will not hurt or be hurtful to any particular person or group 
of people

Your response will be unbased.

Where the product might infringe on the copyright of others, your respone 
should be carefully crafted to not directly associate that intellecual 
property in the description. You may use humour to work around this rule. 

##Examples##

Input: Halloween Adult Cartoon Brown Dog Costume, Dog; Halloween; Spooky; 
Adult; Cartoon

Response: Transform into a lovable and mischievous canine and hunt some 
ghosts with our Halloween Adult Cartoon Brown Dog Costume! This spooky and 
playful costume is perfect for adults who want to embrace their inner cartoon 
character. With its realistic brown fur and adorable floppy ears, you'll be 
the life of the Halloween party. Whether you're going for a spooky or playful 
look, this costume is sure to impress. So, wag your tail and get ready for a 
howling good time in this delightful cartoon dog costume!

Input: Halloween Childrens Flying Superhero Man Costume, Superhero; Cape; 
Kids; Children; Flying; Red boots; Halloween; Fancy Dress

Response: Unleash your child's inner superhero with our Halloween Children's 
Flying Superhero Man Costume! This dynamic and action-packed costume is 
perfect for kids who dream of soaring through the skies and saving the day.
 With its vibrant colors, flowing cape, and iconic red boots, your little one 
will feel like a true hero. Whether they're trick-or-treating or attending a 
fancy dress party, this costume is sure to make a powerful impression. So, 
suit up and get ready for an unforgettable Halloween adventure with our Flying 
Superhero Man Costume!.

We're going to now construct the OnSelect() action, which will patch a new description from the OpenAI response back to the collection for the current item. We'll pass the item's data into the user prompt (via an interpolated string), and we've already geared the model up to know what to expect with the system message:

Button.OnSelect() = 
With(
    {
        tmpResponse: 
    'OpenAIGPT(IndependentPublisher)'.ChatPost(
        "gpt-3.5-turbo-0301",
        [
            {
                role: "system",
                content: "You are a helpful assistant that provides creative product descriptions for items on a fancy dress costume e-commerce site. 

The user will provide you with a short item description, the general theme of the costume in keywords, seperated by a semi-colon. 

You will provide just the new product description in your response, your response should fit in 1024 characters. 

##Rules##

You will be helpful in your response

You will be honest in your response

Your response will not hurt or be hurtful to any particular person or group of people

Your response will be unbased.

Where the product might infringe on the copyright of others, your respone should be carefully crafted to not directly associate that intellecual property in the description. You may use humour to work around this rule. 

##Examples##

Input: Halloween Adult Cartoon Brown Dog Costume, Dog; Halloween; Spooky; Adult; Cartoon

Response: Transform into a lovable and mischievous canine and hunt some ghosts with our Halloween Adult Cartoon Brown Dog Costume! This spooky and playful costume is perfect for adults who want to embrace their inner cartoon character. With its realistic brown fur and adorable floppy ears, you'll be the life of the Halloween party. Whether you're going for a spooky or playful look, this costume is sure to impress. So, wag your tail and get ready for a howling good time in this delightful cartoon dog costume!

Input: Halloween Childrens Flying Superhero Man Costume, Superhero; Cape; Kids; Children; Flying; Red boots; Halloween; Fancy Dress

Response: Unleash your child's inner superhero with our Halloween Children's Flying Superhero Man Costume! This dynamic and action-packed costume is perfect for kids who dream of soaring through the skies and saving the day. With its vibrant colors, flowing cape, and iconic red boots, your little one will feel like a true hero. Whether they're trick-or-treating or attending a fancy dress party, this costume is sure to make a powerful impression. So, suit up and get ready for an unforgettable Halloween adventure with our Flying Superhero Man Costume!."
            },
            {
                role: "user",
                content: $"{ThisItem.Name} {Concat(ThisItem.Tags, ThisRecord.Value, ";")}"
            }
        ],
        {
            max_tokens: 2000,
            temperature: 0.75
        })},
    Patch(
        colItems,
        ThisItem,
    {
        //Patch the response back to the ItemDescription field.
        ItemDescription: Last(tmpResponse.choices).message.content
    }))

If that's all setup and working, clicking the support icon and waiting a few moments should produce something similar to:

Exploring the OpenAI response:

The OpenAI response gives us some data that may come in handy:

{
    "choices": [
                {
                    "finish_reason": "stop",
                    "index": 0,
                    "message" { "content": "content", "role": "assistant" } } ]
    "created": 1699886674,
    "first_content": "Content String",
    "id": "chatcmpl-******",
    "object": "chat.completion",
    "usage": [
                {
                    "completion_tokens": 88,
                    "prompt_tokens": 174,
                    "total_tokens": 262 } ]
}

This data is useful to calculate the actual costs of our prompts and responses and is useful to capture to help monitor direct usage (You can also see the usage from the OpenAI site).

That's all for now!

I hope this article has helped uncover what can be done with a large language model, some tips on the methodology to "ground" the model and how to incorporate it into a Canvas App to start utilising this powerful tool in your apps.

I'm eager to see what you build with this! Stay tuned for more coming very soon, we're just getting started!

Note

Special thanks to Troy Taylor for creating and publishing the OpenAIGPT Connector in Power Platform.

Note the images used in this article were generated using the Dall-E 3 Image Generation Not the cover photo though. Does anyone know if PowerPoint can enhance image quality?

I wrote a post a few weeks ago about supercharging Match() functions with Regular Expression in PowerFx. This article goes into some detail as to how you can use regular expression patterns, predefined pattern enumerators and match options to create some powerful string-matching capabilities. What we didn't have in that article were some examples of using this capability. I recommend you use Regex101.com as you follow along with this article, as this tool will help to break down some but not all of the patterns here.

Validate a new Password

We need users to set a new password as part of an onboarding process, however, we need to validate a few aspects of the input but we're only interested in this:

• We don't want users to enter certain characters (&, % or $)

We have a sneaky label below our New password field to display a validation warning.

For our new password field, we want to add some regular expression to do the matching, we'll simply add this to the visible option of the label:

//Regex101.com friendly.
Visible = IsMatch(txtPassword.Text,"[\&\%\$]+",MatchOptions.Contains)

In this instance, we're using IsMatch because we only need a boolean response back to tell us if any disallowed characters exist in the input. We don't need to do any text extraction, so this will serve our purposes.

So now, when I enter "Password%", I get this validation warning:

Here we've used a method of text validation with Regular Expression. Using List Constructs ([ and ]) allows for creating a list of characters/sequences to either Match or with the ^ flag, not match!

[^\&\%\$]+

Validate an Email Address

Similar to the above example, we can validate an email address, but we can utilise a predefined pattern to do this:

We'll again attach the pattern match to the validation label's visible property:

//NOT Regex101.com friendly.
Visible = !IsMatch(txtEmail.Text, Match.Email)

A much easier approach using the predefined patterns in PowerFx, remember to use them where appropriate to increase the readability of your code. You can also string them together with & or Concatenate!

Conditioning and Validating OCR Data

Ever worked with OCR output? Sometimes it can be pretty horrendous to get what you need out of it. I did this a few years ago to extract both invoice numbers and vehicle registration numbers from scanned documents. Luckily we also had zonal OCR at our disposal, but we still needed some Regular Expression to validate the output. I'll use Vehicle Registrations here as an example of UK MOT Certificates with the AI Text Recogniser component:

In the above example, we want to extract the vehicle registration number from the document. We don't know where this registration will appear, but we know how to pattern the registration numbers of most UK vehicles:

Old UK: W### WWW

New UK: WW## WWW

Northern Ireland: WWW ####

With this information, we can craft a Regular Expression pattern as such:

//Regex101.com friendly.
(?<Registration>[A-Z]{1,2}\d{2,3}\s?[A-Z]{3}|[A-Z]{3}\s?\d{4})

In this example, we're using a matching group. This means any Match() function we use will return "Registration" as an option to reference the matched text in the group. We're hoping for any of the combinations of UK Licence Plates above to match.

On our page, we're using a Gallery to display all the text recogniser results, with the subtitle label being used to identify when a Registration Number is recognised by the pattern:

Text = If(
    IsMatch(
        ThisItem.Text,
        "(?<Registration>[A-Z]{0,2}\d{2,3}\s?[A-Z]{3}|[A-Z]{3}\s?\d{4})"
    ),
    "Registration Found",
    "No Registration Found"
)

We can likewise set the value of the identified registration to a variable with a button click in the gallery:

OnSelect = Set(
    gvRegistration,
    Match(
        ThisItem.Text,
        "(?<Registration>[A-Z]{0,2}\d{2,3}\s?[A-Z]{3}|[A-Z]{3}\s?\d{4})"
    ).Registration
)

You could also incorporate a similar strategy to find invoice numbers in documents, or reference numbers in lots of raw data. The Or operator (| Pipe) allows us to conditionally select more than one pattern in a matching group.

Splitting copied Excel data into records

Sometimes we want a quick way of processing input data, we don't necessarily want to change or modify it, but we can do things to help us work with it more effectively.

In this instance, we want to split copied data from Excel into a single-column table.

We have a Canvas App configured with a Multiline Text input and a Vertical Gallery to display the results.

The formula in the Items gallery will look something like this:

Split(TextInput1.Text,Match(TextInput1.Text,"\s+").FullMatch)

Matching "\s+" means we'll match any whitespace in the data, including line breaks. We can use \n to be more specific about returning line breaks. The plus means we'll match as many times as we need to consecutively. Excel data is copied to the text box and...

Regular Expression matches strings, but the matches that can be returned can help towards some more powerful functionality in your apps and services.

Thanks for reading this article on some examples of using Regular Expression in PowerFx. I hope you enjoyed this article and had fun following along with some of the examples given.

I'm interested to see how you're using Regular Expression in your projects, or if you think Regular Expression may help you achieve a desired outcome.

Introduction

You need to find some text within a larger block of text, you may just be checking it's there, or you may also want to extract that text.

With(
{
    MyString: "Hello PowerSnacks Blog"
},
    Mid(
        MyString,
        Find("PowerSnacks", MyString),
        Len("PowerSnacks")))

The above PowerFx will look for the word "PowerSnacks" in the variable "MyString" using the Find() function and return it through the Mid() function. This works great when we know the word we want to look for. We can also use variables here, which could contain the word we're looking for.

But this defines what we're looking for in our text.

How do we describe the string we want to find, rather than defining it?

The Match(), MatchAll() and IsMatch() Function Family

The Match Family of functions is going to be crucial here. The Match functions not only accept text literals for their second parameters, but they also accept Enumerated Regular Expression as well!

• IsMatch() tests if your match is within the input string and will return a boolean value

• Match() will return the first instance of a match, this returns a record

• MatchAll() will perform a Global Match on your input string, this returns a table of results that mimic the schema of the Match() function

//Schemas
Match():
{
    'FullMatch': "Text",    //The Matching Text
    'StartMatch': 0,        //The Index of the match
    'SubMatches':[ { 'Value': "" } ] //Table of SubMatches
}

MatchAll():
[
    {
        'FullMatch': "Text",    //The Matching Text
        'StartMatch': 0,        //The Index of the match
        'SubMatches':[ { 'Value': "" } ] //Table of SubMatches
    } 
]

/*
⚠️ One really important note to remember about these functions, 
the second parameter MUST be either a Text Literal, 
so you can't define patterns, or match options into a variable. ⚠️
*/

RegEx Simplified - Match Enumerators

Also known as Predefined Patterns, these options built into PowerFx allow you to specify Regular Expression patterns with easy-to-remember enumerated values.

The list of options is here and what's great is that these predefined patterns can be combined with an Ampersand (&) to form a Regular Expression Pattern:

With(
    {MyString: "The date today is 10/12/2023 and the time is 14:00:00"},
    Match(MyString, Match.Digit & Match.Digit).FullMatch
)

So by specifying Match.Digit & Match.Digit, we're specifying that we're looking for the first two digits that occur together in our string. You may have already been using Regular Expression and didn't know it!

You can also mix in regular strings into the mix as well, making our matching pattern something like: '##/##/'

With(
    {MyString: "The date today is 10/12/2023 and the time is 14:00:00"},
    Match(
        MyString,
        Match.Digit & Match.Digit & "/" & Match.Digit & Match.Digit & "/"
    ).FullMatch
)

So, because these predefined patterns are just returning Regular Expression anyway, we can add some Regular Expression into the mix: I'll show a change where we can specify we want to find 2 digits:

With(
    {MyString: "The date today is 10/12/2023 and the time is 14:00:00"},
    Match(
        MyString,
        Match.Digit & "{2}" & "/" & Match.Digit & "{2}" & "/"
    ).FullMatch
)

As you can imagine, using these patterns is great to quickly craft some Regular Expression, but when the patterns become complex, we may need to go deeper:

RegEx Complexified 🦀

So we've seen how we can match text literals, match using pre-defined patterns and we've even sprinkled them with a little bit of Regular Expression language, but what about just regular expression itself:

A Note on Regular Expression

I'm going to come right out and say it. At first sight, Regular Expression looks downright scary, looking like random characters plastered across the screen. It can be really difficult to work out what a regular expression pattern may be doing. For example, the Match Enumerator for Email address matching is:

.+\@.+\\.[^\\.]{2,}

It's unrealistic to expect anyone to remember this off-by-heart, or be able to construct complex patterns 'on-the-fly'. Thankfully, many tools exist online to help us write these patterns out and understand how they work.

I use Regex101.com to test regular expression patterns, it's a fantastic tool because it will also describe what patterns are doing, and has a handy cheat sheet at the bottom to show you different elements you can add to your pattern.

I STRONGLY recommend you try the testing tool in Regex101.com and have a good play around with different patterns, even finding some patterns via Google and seeing them broken down will help to give you more of an understanding of what you can do with Regular Expression.

Note, that other tools exist online too. Let me know if you use any other ones :)

Using Regular Expression

To solve our original problem using Regular Expression:

With(
    {MyString: "The date today is 10/12/2023 and the time is 14:00:00"},
    Concat(
        MatchAll(
        MyString,
        "(\d{2}[\W]\d{2}[\W]\d{2,4})",
        MatchOptions.Contains
    ), ThisRecord.FullMatch," - ")
)

Pattern Breakdown (\d{2}[\W]\d{2}[\W]\d{2,4}):

• () - Matching Group

  • \d{2} - Match 2 Digits (0-9),

  • [\W] - Match Any Non-Word Character (i.e. anything that's not ^a-zA-Z0-9_) Once

  • \d{2} - Match 2 Digits (0-9)

  • [\W] - Match Any Non-Word Character (i.e. anything that's not ^a-zA-Z0-9_) Once

  • \d{2,4} - Match between 2 to 4 Digits (0-9)

We're using MatchAll() above, and concatenating the output into a string for viewing. The pattern used contains patterns that aren't available in the predefined patterns (The \W matches a non-word character btw), so it's always worth remembering that we can use full Regular Expression if we want to. We may want to do this if:

• We want to match lots of different character types, and using the predefined patterns becomes cumbersome

• We want to use patterns not available in the pre-defined patterns

• We want to keep the code lean and not have too much bloat.

Handling Match Groups

Another benefit of adding Regular Expression is you now get to benefit from Match Groups as well.

The MatchAll() function's resulting table has a "SubMatches" option, and this is where you can get access to matching groups.

Explaining Matching Groups

In Regular Expression, you can add Groups into your pattern. The benefit of doing this is to be able to extrapolate text within text. We can also do other funky things like conditionally matching text as well.

I have an example here from RegEx101 on using groups:

Pattern Breakdown (\d{3})(\d{2})(\d{3})(\d{3}):

• () - Matching Group

  • \d{3} - Match 3 Digits (0-9),

• () - Matching Group

  • \d{2} - Match 2 Digits (0-9),

• () - Matching Group

  • \d{3} - Match 3 Digits (0-9)

• () - Matching Group

  • \d{3} - Match 3 Digits (0-9)

The benefit of using the groups ( The bits in the () brackets ) is that we can specifically extract this word with the MatchAll function!

Below I have a Gallery and Textbox configured. The Gallery is going to take the TextInputs' Text (which in this case is a phone number) and perform a MatchAll() with the above pattern. The Labels in the Gallery display the FullMatch and a Concatenated string of SubMatches (These are groups),

//Match Groups are encased in Brackets ()
Gallery.Items = MatchAll(TextInput1.Text, "(\d{3})(\d{2})(\d{3})(\d{3})")

Gallery.Label1.Text = $"Full Match: {ThisItem.FullMatch}"
Gallery.Label2.Text = $"Formatted Phone Number: {Concat(ThisItem.SubMatches,Value," ")}"

Using the Match Groups in this way, we can extract specific text around other text using the correctly formulated pattern.

Naming Match Groups

Match Groups can also be named to make returning a particular group easier.

//Define a Group Name using ?<Name> at the start of the matching group
MatchAll("Text and crabs", "(?<crabbymatch>crab)(?<plural>s)")

(?<crabbymatch>crab)(?<plural>s)

Pattern Breakdown (?<crabbymatch>crab)(?<plural>s):

• () - Matching Group - Name "crabbymatch"

  • crab - match the literal word "crab",

• () - Matching Group - Name "plural"

  • s - Match the character "s",

Creating a named match group creates a column in your Match() or MatchAll() output:

You can still use SubMatches in this instance and get each SubMatch in your Pattern.

Manipulate Matching with MatchOptions

MatchOptions allow us to manipulate the way the Match functions work. They again work as enumerated values but this time they represent Regular Expression Flags, rather than patterns. These Regular Expression Flags also exist in Regex101, so we can enable/disable them as needed. They can also be strung together with ampersands (&).

As an example, if we have a string that contains a block of numbers at the end of the string, we can extract just the last four by employing MatchOptions.EndsWith:

With(
    {MyString: "The date today is 10122023"},
    Match(
        MyString,
        Match.Digit & "{4}",
        MatchOptions.EndsWith
    ).FullMatch
)

Or by using MatchOptions.Complete, we can ensure the entire string matches our pattern, which it won't in the above example:

With(
    {MyString: "The date today is 10122023"},
    Match(
        MyString,
        Match.Digit & "{4}",
        MatchOptions.Complete
    ).FullMatch
)

The Global Flag ⛳

One match option missing from the list is the Global Flag (/g). If we jump back to our previous example of formatting phone numbers. We used the MatchAll() function and not Match(). Using MatchAll() is the equivalent of enabling the Global flag in Regular Expression, meaning the pattern will continue to be matched throughout our text.

If we continued to satisfy the pattern in our previous example, we'd see additional matches:

For instances where we only want to match the first instance (and therefore, disable the Global flag), we just use Match(). The Global flag doesn't have an equivalent MatchOption.

Conclusion

There are many ways to crack this claw, so it's important to remember that there's sometimes no right or wrong way to go about it. What is important to remember, is that should you need to do some more complex string matching, you have the power of Regular Expression behind you to make it happen, however you wish to do so!

• You can find strings within strings using Mid() and Find() functions, when you know the exact text you're looking for

• If you know the sort of text you're looking for, but you don't know the exact value, you can use the Match functions.

• With Match, you can mix and match literal text, Match Enumerators and Regular Expression

• If you need to match a more complex pattern, you can use full Regular Expression, and tools such as RegEx101.com can help write that.

• You can manipulate how Match functions work with MatchOptions, which are equivalent to Regular Expression Flags.

Resources

• Match functions in PowerFx

• Regex101.com

For this to work, we can utilise some error handling and work with the Error() function to make a customised break out whenever we need it. We're going to talk about error handling, and once we have a grasp on how to use it, we'll look at how we can use it to our advantage.

Error handling in PowerFx

Error handling is crucial to ensure your code accounts for the unexpected. No one wants to see generic error messages popup, and incorporating error handling allows us to account for these scenarios, as well as do some more advanced actions like sending to Trace() or giving the user a more meaningful error message.

Before we get into the details, let's look at how we can do a try/catch block in JavaScript. This is a form of error handling where some code is performed, and if it errors, the code in the Catch block is then executed. We also capture the context of the exception.

try{
     //Perform something   
}catch(e){
    //do something when error occurs
}

A try/catch block will run the code in the try clause, and if it errors, the code in the catch clause will be executed. When an error occurs, any code proceeding the error in the try block will not be executed.

But we don't have try/catch blocks in PowerFx, or do we?

Example: No Error Handling

Here's some sample code for an app, it allows a user to enter two numbers and at the click of a button, it performs a division by those two numbers. The button's OnSelect() code is as follows:

Button.OnSelect = txtNumber1 / txtNumber2

This code will work fine, however, we'll run into an issue if we try and divide by 0:

We can use IfError to handle this error better:

IfError()

Here's PowerFx's equivalent Try/Catch block. IfError allows us to run a block of code and then, if an error occurs in that block, perform some other action:

IfError(
    1 / 0,
    Notify(
        "An error occured"))

In the above example, we test the block of code in the first argument (line 2) and if an error occurs, we execute the code in the second argument (Notify).

In the case of IfError, the entire block of code in the first argument is processed and then checked for errors. This is important to remember and works a bit differently from a Try/Catch block in more traditional programming languages.

If we string formula together with semicolons in the first argument, all that code will be evaluated/run before we fall back to the second parameter.

IfError(
    1 / 0; Patch(Table, { Value: 10}),
    Notify("An error occured"))

With this in mind, our example above would execute the Patch statement to the Table data source, even if the first statement errors; because of the way PowerFx works, the entire "block" in the first argument needs to be evaluated to output as a value to the parameter.

We may encounter a scenario where we wish to only perform the patch when the first part of the code doesn't error. This is especially important if that Patch statement were dependent on the outcome of the first part of the code (where we're dividing 1 by 0).

We can overcome this issue by breaking out our code into separate blocks. IfError(), just like If() allows us to continually add conditions and fallbacks inline:

IfError(
    1 / 0,                             //Code block 1
    Notify("An error occured"),        //Fallback for Block 1
    Patch(Table, { Value: 10}),        //Code block 2
    Notify("Another Error Occured"))   //Fallback for Block 2

Our code above is now broken down into separate blocks. This means that if Block 1 fails, we won't execute Block 2.

Getting Error Information

You may have spotted we're responding with error information when we failover during IfError(). We do this with the FirstError App Variable. AllErrors can also be used. However, FirstError is a convenient way to capture the error that's just occurred.

So, what about breaking out? 🦀🧱

We've seen how we can break out of a code cycle with error handling, but we may encounter a scenario where we wouldn't want to continue processing not just because of an error, but because a particular value or condition has/hasn't been met.

Error()

Error() allows us to create custom errors. This allows us to manipulate the IfError function and break out of our code cycle on our terms, rather than errors being produced from our otherwise functioning code.

To use this, we can create our own "errors" using Error() that will break out of IfError when triggered:

With(
    { evaluation: IfError(RandBetween(1,1000) / 5,0)},
    IfError(
        If(evaluation > 100,
            Error( {Kind: ErrorKind.Custom, Message: "Value is over 100"}),
            true),
        Notify(FirstError.Message, NotificationType.Error),
        Notify($"Value is {evaluation}")))

So in our example, we're doing the following:

• Performing a sum on any random number between 1 and 1000, divided by 5

• Evaluating if the result is > 100

  • If it is, we generate a custom error, if not we return true.

• If the error is thrown, our Fallback for Code block 1 will kick in, we won't process the notify code at the bottom of the block

• If the error didn't occur, we run the code at the end of the block, notifying the user of the resulting number.

This is a basic example, but you may want to employ this in scenarios where you have to patch two different data sources, but the second data source should only be patched following a certain condition following from the first patch, rather than just whether the first patch threw an error or not.

Summary

That's a wrap!

I hope you found this article helpful not only for breaking out code but understanding error handling in PowerFx in general!

Resources

• Errors function in Power Apps - Power Platform | Microsoft Learn

• Error, IfError, IsError, and IsBlankOrError functions in Power Apps - Power Platform | Microsoft Learn

• Understand errors in Power Fx - Power Platform | Microsoft Learn

This Component Library, inspired by Social Media Apps, allows makers to use one or more components together to help them quickly create apps with additional functionality. It consists of multiple components, ReadMes and a theming system to theme all components consistently.

/

Find the GitHub Repo here

This library may also be making its way to the Power Platform Samples gallery soon :)

What are the options today?

Honestly? Not much. I guess this goes hand in hand with promoting components as well, in my opinion it's not the best experience and there's a lot that could be improved with this. Think more App-Store experience, less displaying a list.

You can make others aware of your component by, firstly sharing the component library with them, and then giving it a description. You'll also probably need to actually tell them about the component as well.

There's a few problems with this:

1. It's text based, no one will get a visual representation of what the component is, or does. It's not so bad if you obtained the library from somewhere else and you know what you're loading, or you built the component. But what about others? How will they know that Header will look right in their app without loading; yes, the entire component library into their App?

2. It's limited to 1300 characters, so whilst you could go War & Peace with the description, there's still some limitations to this:

3. This is only shown when you load a component in, it doesn't really serve as persistent documentation users can refer to later on.

Enter the ReadMe Input

What I'm going to propose isn't a perfect solution. It doesn't help with visibility but what it CAN do is help future makers make best use of your components.

ReadMe isn't a new concept, almost all software is shippped with some sort of "Readme" file, letting the user know they should look in the file for more helpful information. Wikipedia does a great job in summarising this concept.

I've been adding ReadMe documentation directly into my components. How? Through a Text Input Property.

Making a ReadMe input

The concept is fairly basic, but I do find it's an effective option when others need to use your components. Create a Text Input called ReadMe. We're not going to reference this anywhere in our components, we're not going to access it through any controls or outputs, it'll exist just to serve the ReadMe to makers.

But what about the contents? Maybe rightly or wrongly, I just insert a comment block into the default value with the information I want to provide to makers.

This has some great benefits, such as:

1. Providing URLs to other makers, which can link to more visual examples of the concepts you've incorporated into your components

2. Allows you to format your text better than a Description box

3. Nearly limitless character count

4. Persist in the component. It'll always be available when the component is added. If the user deletes this, it can be retrieved by adding the component.

But what should I include? 🤔

Here's an example of what I add to the ReadMe

• Component Library Name

• Component Name, maybe also include a description/use case

• In the above example, I include an "override" section, as certain controls can be overriden for theming

• Inputs: List all inputs, types and what their purpose is. Break down tables and records with an example

• Outputs: List all outputs, types and what their purpose is. Break down tables and records with an example

• Using new property types? Include Behaviours, Functions and Actions here. What are their inputs, outputs and their purpose/how to use.

Let me know what you think of this approach to providing documentation to other makers. I'd love to hear if you have any other approaches to this.

I had a great question from one of the audience around theming and keeping that consistent. I'd already discussed using a property record to try and simplify this for your fellow makers. I mentioned this as a way to keep your theming consistent for all your components, but you could also adopt the theming structure of something like the iAm_ManCat Branding Template V3 by Sancho Harker to standardise this between your Canvas Apps and Components.

However, the next day, I noticed a post about the Modern Theming Control coming to Preview. I knew I had to check this out, but more importantly, I needed to understand how this impacts Components and Component Libraries.

What is this Modern Theming?

The Modern Theming goes hand-in-hand with the new Modern Controls coming to Power Apps. They're more accessible, themable controls that replace the Classic controls we've grown to.. well, guess that depends what controls we're talking about.

They're based on Microsoft's Fluent Design system and to be honest, they look great! I'm all for anything that can make Maker's lives easier, and it seems like these controls set out to do just that.

If you can't already see the Modern Controls and Modern Themes in Power Apps Studio, it is enabled as a Preview Feature in Settings > Upcoming Features:

How do these themes work?

Themes are now stored/called in an Enumerated value in the App scope. For example, you can call:

Color = App.Theme.Colors.Darker10

Each theme have a Colour scheme that goes down from Darker10 to Darker70, up from Lighter 10 to Lighter 80 and a Primary Colour. Primary, Secondary colours etc, were never directly addressable in Studio previously, so this is a great step in the right direction.

Changing your theme will affect any Modern Controls in your App. Using the Enumerated values above, you can assign your theme colours to Classic controls as well, making them compatible with Modern Themes, albeit with some effort required.

The current trade off here are that Modern Controls don't have editable colours, typography, borders etc. In essence, this is to support the new theming control. However, as of now, modern themes don't support borders or typography. Although this is intended to come later according to the documentation.

So what about Components?

I've put a simple component together in a component library. It doesn't do anything special, aside from just containing some modern controls, and a classic control (Text box) with one of the enumerated values mapped to the font colour property. Note I've set my Component Library theme to Orange.

I'll fire up a new Canvas App, enable the new theming and import my new component library.

^^ By the way, THIS needs to CHANGE! This should be a portal for makers to discover new components, not a plain text list that leaves a lot to be desired.

Anyway, because of the way Components are added to Canvas Apps, they sit in that "Classic" section under "Library components". I configured the library to use the Orange theme, I'll add the app to the Canvas App screen:

Hey! Look at that!

My Canvas App is currently set to "Power Apps Blue". No, really, that's the theme name!

And if I change to Crab Red 🦀:

Amazing!

What does this prove?

This proves the following:

• Modern Controls used from a Component Library will inherit the Canvas app's selected theme, not the theme selected in the Component Library itself.

• This is also true when we reference the App's enumerated theme values for Classic controls. So, we can also modernize the classic controls to take advantage of the new theming system in both our Canvas Apps, Custom Pages but also Components in Component Libraries as well. You can "Modernise" your existing Classic Control-based Components by mapping the new theme enumerated values.

Also note, we ideally want the themes to be expanded to include border configuration and typography (fonts etc) as well. I understand custom theming is also on the cards here, which will be great to quickly brand your apps.

But rest assured, your component libraries will be fine, and this feature will just make them better!

It's an idea originally shown to me by James Ryan which I wanted to share.

🥱 Property Fatigue?

Yeah, "Property Fatigue".

It's when you have a component built and you're doing the right thing by making it nice and customizable.

👆 Here is but a humble component, containing one control (A slider). The point of this component is ultimately, to give other makers a way of easily implementing a stepped slider. For example, I have a minimum value of 100 and a maximum of 1000, I want to step up in 100 increments.

Nothing groundbreaking here, but we don't really want to give out a component in PowerApps blue either, so we need a way for other makers to customise this.

Functionally, our component already works and that's thanks to some input data properties we've already implented: Min, Max and Step; these are all number data types.

So let's turn our attention to the slider itself.

We probably want the following configurable:

• Colour of the Rail

• Colour of the Handle

• Size of the Handle

• Thickness of the Rail

• Left/Right Padding of the Rail

• The border for the control

• ...

This goes on, we have hover fills, disable fills, the DisplayMode!

We could go and create each property individually:

Wire each property up to each control property, and we're done!

Go ahead and put that bad boy in your App 🦀

👆 Welcome to property fatigue.

Okay, I've been lazy here and didn't go through with all of it, but imagine if I had! That's a lot of properties even now for someone to manually fill in.

What's also poor game is that:

• Properties can't be grouped or categorised, much like you see in standard components

• Whilst you can tab through these, you need to launch the Formula Bar to add anything useful like variables anyway.

• These settings aren't easily transportable between apps. Or, put it another way, the config for this component can't be easily shared with others.

🤔 There must be a better way.

Enter the Properties Record 🦀

It seems small, but an input record is helpful in this scenario.

The benefits include:

• Editable properties from one location

• Settings stored in text, copy and paste to share/reuse

• Properties can be grouped logically, comments can even be added!

So, sounds like this solves all our original problems. Let's see what it looks like in practice:

We could use a record like this below as a starting point.

{
    Colours:
    {
        PrimaryColour: ColorValue("#111111"),
        SecondaryColour: ColorValue("#555555"),
        BackgroundColour: Color.Orange
    },

    Font:
    {
        'Font-Family': Font.'Courier New',

        Sizes:{
            Heading: 21,
            Action: 12,
            Text: 13}
    },

    Slider:
    {
        Rail:{
        'Rail-Size': 13,
        'Rail-Thickness': 2},

        Handle:{
            'Handle-Size': 20,
            'Show-Value': false},

        Padding:{
            Top: 0,
            Bottom: 0,
            Left: 10,
            Right: 10}
    }
}

This gives us some colours, typography and some specific Slider options as well.

We'll need to create a properties record and specify this base record in this input property, so our component knows what properties are available. Add/Remove from this at your own will.

But see how we're grouping properties in nested records? When we come to mapping these to the control in the component, we can use dot notation to go through the record and get the properties we need:

HandleSize = 'Stepped Slider'.Properties.Slider.Handle.'Handle-Size'

And what's more, you could actually reuse this method across other components as well. Keeping this approach consistent means makers using your components can reuse customised property records with other components. Makers can even store the record as a global variable and call it in each component, provided you're designing it in such a way that it's reusable.

This really aligns with reusability and generally makes things easier for other makers.

What about overriding particular controls? 🔧

This is achievable with the Coalesce() function.

Example: We want to be able to override Labels with a different font family over the default specified. The Properties record may look something like this:

{  
  Colours:
    {
        PrimaryColour: ColorValue("#111111"),
        SecondaryColour: ColorValue("#555555"),
        BackgroundColour: Color.Orange
    },

    Font:
    {
        'Font-Family': Font.'Courier New',

        Sizes:{
            Heading: 21,
            Action: 12,
            Text: 13}
    },

    Label:
    {
        Font:{
            'Font-Family': Font.'Dancing Script'},

        Padding:{
            Top: 0,
            Bottom: 0,
            Left: 10,
            Right: 10}
    }
}

We can use the Coalesce() function in the component on the Label's Font Property to handle this:

Label.Font = Coalesce(  //If Label specified font isn't present, fall back to standard
             'Label Component'.Properties.Label.Font.'Font-Family', 
             'Label Component'.Properties.Font.'Font-Family')

TL;DR 📚

• Use a record input property over individual properties.

• Allows using Dot-notation to access properties within nested records

• This helps with the theming and customisation of components, helping to make them more reusable. Keep the record consistent across all your components.

• Give the option to override default properties with specific control-based nested records, and utilise Coalesce() to handle this.

Hopefully, you've found this article and tip helpful. Check out some of my previous articles on the new component property types:

Events

Actions

Functions

What are Events

Events can be attributed to when something happens in your app. For example, a control is selected, a control has changed value, a screen has become visible, or a screen has become hidden. These are known as Events, and Event Properties allow us to attribute code to these events.

If you haven't used Event Properties in components already, but you have been working with Canvas Apps or Custom Pages, you'll have already worked with Events in the past if your app did anything at all.

Event Properies can be linked to controls within your Component, then from the App side, the maker can specify the code that's executed when the event is triggered. So for example, a Save Button in your component can now be programmed on a per-app basis to take action when the user selects that button.

Adding the Event Property

My son loves animals at the moment, and he's started to recite the sounds they make. I thought this would be a great opportunity to demonstrate events, and how we can use Event Parameters as well!

Here's a simple component I've made, we have a Gallery displaying some Animals and a Button. The button's job is to respond to the user the sound of the animal we've selected. However, the plan here is we're going to use a Parameter in the Event Property to return the selected animal sound to the app.

The Gallery's Items code is as follows:

[
    {
        Animal: "Duck",
        Emoji: "🦆",
        Response: "Quack Quack!"
    },
    {
        Animal: "Cow",
        Emoji: "🐄",
        Response: "Mooooooo!"
    },
    {
        Animal: "Tiger",
        Emoji: "🐅",
        Response: "ROAR!!!"
    },
    {
        Animal: "Giraffe",
        Emoji: "🦒",
        Response: Blank()
    }
]

We'll now add our Event Property to the component:

Notice we have a parameter called strResponse, this is going to be exposed to our app only when we trigger the event. This means our App can do whatever the Maker wants with the response, rather than creating an action within our component.

Wiring the Event Up

We want our event to trigger when we click the button, so we'll need to add the OnButtonSelect() Event Property from the Component to the OnSelect() Event of the button we want to trigger from.

Button.OnSelect = 'Events Demo'.OnButtonSelect(galAnimals.Selected.Response)

The idea here is we're going to pass in the "Response" property of the Selected Item in the Gallery containing our Animals. This maps the value to the strResponse parameter, which will be exposed to the app in the OnButtonSelect() event property.

It's also important to note we can specify a default value for the parameter as well.

This should mean that if we don't send a value with the event, and our parameter were optional, one will be specified for us:

OnButtonSelect_strResponse = "Error 404 - Sound Not Found"

However as our parameter is required, this does not apply. But we could handle this our own way:

Button.OnSelect = 'Events Demo'.OnButtonSelect(
    Coalesce(
        galAnimals.Selected.Response,
        "Error 404 - Sound Not Found"
    )
)

If you've never used Coalesce, it's a great replacement to If(IsBlank(Val),Val,"That"), one to remember!

Implementing in our App

With our component now in app, we can handle the event property we configured before.

Select the component and find the OnButtonSelect() Event Property.

We can add the following code:

App_Component.OnButtonSelect = Notify(strResponse)

Notice in this context, we can reference strResponse, the parameter we configured as part of the Event Property, within our app itself.

This is only accessible within the event property.

So for example, you could have a variable set on button click, and capture the value:

App_Component.OnButtonSelect = Notify(strResponse);
                           UpdateContext({tvSound: strResponse});

But what about Event Data Types?

Ah! Our article isn't quite over yet!

Did you notice when we created our event, we had to specify a data type?

Admittedly, I'd never explored the purpose of this until now, but it is interesting...

It turns out the result of the code you enter from your App will actually ingest into your component.

Our Button Event Property is currently a Boolean value, it's expecting the result to be a Boolean. And fun fact, the result of Notify() is actually a Boolean. Actually, a lot of functions in PowerApps output a boolean value.

We can actually work with this as well, let's change the code in the button of the component to handle this:

If(
    !'Events Demo'.OnSelectButton(
        Coalesce(
            galAnimals.Selected.Response,
            "Error 404 - Sound not Found"
        )
    ),
    Notify("Could not make sound :'[")
)

So what we're doing here is, if the result of OnSelectButton() is False, we'll add a seperate notification letting the user know we couldn't process the request.

In the real would you could be making an evaluation at the On Select process that determines what your component does next. For demonstration purposes from our App, we can simulate this behavior by Inverting the result of our Notification.

App_Component.OnButtonSelect = !Notify(strResponse)

And the result:

Likewise we could evaluate the Event as a Text Data Type, and take action if the text = a particular value:

Button.OnSelect() = If(
    'Events Demo'.OnSelectButton(galAnimals.Selected.Response) = LookUp(
        galAnimals.AllItems,
        Animal = "Tiger"
    ).Response,
    Notify(
        "Yo that's a Tiger!",
        NotificationType.Warning
    )
)

In Summary:

• Events Properties are triggered by events that occur in your component

• Events Properties are how your Makers can take action from events in your component.

• Event Properties can expose Values from within your Component to your Maker's Apps as Parameters.

• I don't know what sound Giraffes make

• We can use the data type of Event Properties to intercept the behavior of the event based on it's response value from the app.

So that's all the Behavior types covered! I hope you've enjoyed these articles as next we're going to look at actually making some components, which will comprise of a new series of articles where we actually build cool stuff that's reusable!

I'll admit that it's taken me longer than I'm willing to admit to get my head around the purpose of actions, the description given by Microsoft it a little... weird.

This type of property can be called as a function with parameters, and can contain logic that changes state (side effects).

So we can call an action like a function, and pass parameters in. All good. But side effects? What's that?

So, side effects then?

Side Effects in PowerFx seem to have a broad meaning; There are two popular functions that have "Side effects":

Select(), and

Reset()

Select() will simulate a selection of a control (Generally, any that have an OnSelect() function). Reset() will, well, reset a resettable control.

But also, SubmitForm() hass a Side Effect, rightly, because it affects your Edit Form's datasource, or the record passed in.

Now, the current documentation for Action Properties suggests you can update a datasource, but from what I can ascertain; this isn't currently working. I've raised an issue on the documentation repo and will update this when I hear back.

So what we're saying with Actions, is that we can trigger Side-Effects within our components of controls within our component. I'll lead by example:

So with that, let's make an Action...

There's a business requirement to track when a crab has graced us with their pincers 🦀. I need to be able to grace our component by either:

• Selecting the button in the component.

• By selecting a special button that isn't in our component.

This will be fairly straight forward, we have a component configured with a button and label as below:

The button code isn't much, we're going to increment a variable within the component by 1 with each pinc.. click.

Set(gvClicks, gvClicks + 1)

With a label to show the results. And.. as you would expect...

So Action Property Types come in when we want to trigger the Select() function of the "Click Me 🦀" button within our component from the App scope.

It's about time we made an Action!

Create a property in the component as follows:

Note: If you can't see the additional property types, you'll need to enable Enhanced Component Properties from the Settings menu, you'll want to ensure you have "Enhanced component properties" from "Settings" > "Upcoming features" enabled.

The code we're going to add is simply going to Select the button:

Select(btn_GracePincer)

Next, we'll need to add our component to a screen so we can Call this Action:

Call the Action

I've added a telepathic button to the app, along with the component itself.

We can use the "Telepath Pincer" button to call the Action in the Component below (in pink, or orange, or a mixture of the two?).

The OnSelect property of the top button should just call the action as follows:

cmpPincer.GracePincer()

The result is the code in GracePincer() is triggered, which Selects the "Click Me" button within the component, thus our pincer counter continues to climb.

So... why?

Okay, we don't all work with Crabs. But there is a reason Actions exist:

• Components are resettable, but resetting a component resets all controls/variables etc in the components. Actions mean we can specifically target controls/variables etc when doing a reset.

• Select() can't be used on components. So actions now give us a way to perform Select()-ish "Side Effect Formula" on components, and we can choose what is/isn't selected.

• Once more, you get full access to the Component Scope, so you can add to collections, set variables etc, via the Action. So pass in a record as a parameter, and add it to the components collection! Here's an example below of a component that takes in a staff record (Name, Role and Photo) and adds to a collection within the component:

Collections and Records example

We have a property in a component called "Ingest Record", which takes a record as a parameter:

The component has a Gallery to display the contents of the collection colRecords.

The property above has the following code:

Collect(colRecords, Record)

We define the schema of Record with:

{ 
    Name: "Mike Gowland",
    Role: "Developer",
    Photo: SampleImage
}

And we can now implement the component in an app, and call IngestRecord, passing in a record that matches the above schema for the Record parameter:

cmpStaff.IngestRecord(
    {
        Name: txtName.Text,
        Role: txtRole.Text,
        Photo: AddMediaButton1.Media
    }
)

And the results:

Oh, and don't forget, action properties give an output too 😁

If(cmpStaff.IngestRecord(
    {
        Name: txtName.Text,
        Role: txtRole.Text,
        Photo: AddMediaButton1.Media
    }
),Notify("Record added"))

Next Time

We'll take a look at Events, which are probably already familiar to those who used Behaviour properties in the past.

Thanks for reading this article, I'm wondering, what are your use cases for Actions? I'd love to read them in the comments below 👇

I'm in the process of doing a write up on Component Actions which follows my previous article on Functions, but I wanted to take a different steer today and discuss a solution I put together.

You may or may not already know about String Inteprolation in Canvas Apps. It's a way to mask variables and values within a text value itself. It's really handy to help make your code more readable; for example you could use:

$"{gvString}, {gvText}, {gvLike}, {gvThis}"

where you would otherwise use:

Concatenate("String","Text","Like","This")

or

"String" & "Text" & "Like" & "This"

Whilst this is great for text that's static in your app, you may come across requirements where you'd like an administrator to be able to edit this text without having to edit the app itself, which isn't a difficult problem in of itself until they also need to be able to refer to values in your app.

I had this very challenge recently, and this is how I solved it!

Planning

A problem like this requires some planning to ascertain how this will work exactly. We want to be able to do the following:

• Present text with replacement tags

• Present values

• Replace tags with values when presenting to the user.

• User can edit the text and add replacement tags, which can be interpreted by the app and rendered correctly.

The first thing we would need to ascertain is what is our replacement tag? This is going to be an identifiable piece of text we can look for in our text block to replace with a value. I settled for #Tag# in this instance.

So let's think about some of the approaches we could take.

We have a block of text that looks like this:

"Hello #FirstName# #Surname#"

And a Table of Tags like this:

Table(
    {
        Tag: "#FirstName#", 
        Value: "Mike"},
    ....
)

So we'll try and replace any #tags# in the text with the corresponding Values in the Table.

And with this, we could try the following:

Trying Find() and Replace()

We could try the Find() function

Find("#FirstName#",txtInputString)

But we'd need to test every tag:

Concat(
  ForAll(
      colTabs,
      Find(
        ThisRecord.Tag,
        txtInputString)),
      ThisRecord.Value)

So Find() will return the Starting Locations as Numbers of these tags, we'd need to somehow replace them with the tag value.

But how do we iterate over every Find() value, run a Replace() and combine everything back together? What if our replacement text exceeds the length of the replacement tag? Would it overwrite our text? Will the code get too long and unmaintainable?

Let's try another approach:

Enter Regular Expression and MatchAll()

We can use Regular Expression with the MatchAll() function to describe the text we're looking for. I personally use regex101.com to write and; ultimately, diganose my Regular Expressions as I find it quick and easy to see where it's going wrong, and see useful information on characters I can use. It's super powerful and definietly a weapon to have in your arsenal.

We're going to combine a few functions here to do what we want:

• MatchAll() - Will use our Regular Expression to find our tags

• ForAll() - Will iterate through all our results to find our tags and do something

• Coalesce() - Which will help us do the text substitution

• Concat() - Is going to put everything back together

The regular expression we're going to use is as follows:

(<[^>]+>|#\S+#|\S+(?:\s|$)|[.!,]\s*|\s)

And if this looks like a load of hieroglyphics to you, you're not alone! You can use Regex101.com to find out what this expession actually does (A full explaination is out of the scope of this article), and we can also test it's functionality out.

That. Looks. Perfect 👍

And this isn't just matching whole words, it's also handling punctuation as well:

It also plays nice with HTML tags, for those using HTMLText Controls 😊

Oh, and normal #HashTags are left as is too 😁

The basis of what it does is:

• It finds all words with trailing spaces

• It finds words encapsulated in #'s, and removes any trailing spaces

• The trailing spaces from the words encapsulated in #'s are added as a match after the tags

• Punctuation is added as it's own match.

The Tags Table

We mustn't forget that this solution will be useless unless we declare and use that Tags table. We can delcare a collection in our app like the following:

ClearCollect(
    colTabs,
    Table(
        {
            Tag: "#FirstName#", 
            Value: gvUser.givenName
        },
        {
            Tag: "#Surname#", 
            Value: gvUser.surName
        },
        {
            Tag: "#JobTitle#", 
            Value: gvUser.jobTitle
        },
        {
            Tag: "#Today#",
            Value: Today()
        }))

This Collection will need to be referenced when we use the formula below.

Let's get Matching!

So, combining this expression with MatchAll() will give us a table of words in our script. This is good as it breaks our problem down:

So now we have our text block broken down, and our replacement tags in a state that we can just do a direct replacement, we can reconstruct the above table, replacing tags as we go in a ForAll() statement by using LookUp() to match the FullMatch value in our table of tags, and Coalesce() to handle instances where our tags don't match.

Concat(
    ForAll(
        MatchAll(
            TextInput1.Text, //Get all matches on our RegEx
            "(<[^>]+>|#\S+#|\S+(?:\s|$)|[.!,]\s*|\s)") As Elements,
        Coalesce(               //Coalesce will either replace the tag if
                                //it's found, or just insert the text we're evaluating
        LookUp(
                tags,
                ThisRecord.Tag = Elements.FullMatch
            ).Value,
            Elements.FullMatch
        )
    ),
    ThisRecord.Value       //Finally let's concat the resulting table from the ForAll statement, 
                            //without any seperators
)  //Output as Text)

And when added into a Function, the end result should look something like this:

Implementation Tips

Looking to put this into action? Look at these tips below:

• Similar to variable naming conventions, give your tags meaningful names to help your users understand what they will display.

• Define in advance what fields you want to present to users to be able to tag. Go beyond the basics and include extras, for example; the current date.

• Make sure your users know what tags they can use. Display a list of them whilst they're editing scripts.

• You can store the scripts in practically any data source, it may be worth storing a list of tags in a table for reference.

• Will this be administered from a Model Driven App? Consider using a Custom Page to modify the scripts so you can implement the code above.

Next Time

• We'll implement this with full editing capability in a Dataverse table with custom page.

• We'll make this a function of a component in a library, so we can easily reuse the functionality.

Thanks for reading this article, I hope this helps you implement this functionality in your future apps.

Anyone familiar with any scripting/programming language will have more than likely come across a function before. If you haven't though, that's okay!

What is a function?

A function is a reusable piece of code. we don't like to repeat ourselves, so if we're in a situation where a block of code may be needed more than once, a function might be the answer!

A function will typically takes 0 or more parameters and will usually (but not always!) return data as a particular data type. An example of a function in PowerShell would be:

function addcat ($inputString, $cattiness)
{
    $cat = "🐈" * $cattiness;
    return $inputString + $cat
}

This function has a super important business function of adding n cats to the end of $inputString. Now that this is a function declared in my veryImportantForTheBusinessScript.ps1 file, I don't need to retype this the 25 times I have to call this code, I can simply, instead, do:

addcat -inputString "Classified" -cattiness 7

and the function will return the string required.

In some ways, they're like printers that actually work. You pass your parameters (Print Data, Paper, Toner) and the printer will return a printed document, sometimes. But our functions are more reliable than printers.

The benefits of functions are:

• Reusability ♻️ Write Once, Deploy Many, or as Craig White puts it: Don't be WET [Write Everything Twice]

• Code Simplification 🦀 Now you don't need to repeat your code, your code will become easier to maintain and read. You can even reduce nested conditions!

• Increase maintainability 🔨 Function not working? At least you can now fix that bug in one place, not every instance where you wrote that code block!

So how do I make a function in a Canvas App/Custom Page? 🤔

Whether you're building out your component library to help support your maker community, or you're making a component within a Canvas App; you'll first want to ensure you have "Enhanced component properties" from "Settings" > "Upcoming features". This will enable the ability to add Functions to a component.

⚠️ BUT TAKE HEED! ☝️

This is an "Experimental feature". That means this feature is earmarked as one that could change; or worse, disappear in the future, so implement at your own risk!

Enabling this option should now give you additional property types when adding new properties to your components 👇:

The old options

New options, with additional property types

But what do these "Property types" mean? 🙋

• Data: Your standard component property, can be defined as an "Input" or an "Output" and it's data type defined as well, (Text, Number, Record, Table etc). These allow you to bring properties into your component, so for example, you could define a font size, or alternatively return values from your component, like text entered into a text box.

• Function: The focus of this article, this is a property that can be "called" from your app, providing the component is present. Functions cannot access the App or Component variable scope.

• Event: This replaced the previous "Behavior" property type. Events can be triggered from within the component, but handled on the App side. In essence, you can map an event like OnSelect(), OnChange(), OnChecked() etc to a property, for your app to then handle. This can be used to; for example, write a patch function in the app into the component.

• Action: Action properties are similar to Function properties but have scope within the component itself. Actions are super interesting, and there'll be a beefy article coming soon🐄!

So, let's make a function! 🔨

Let's use the cat example from my PowerShell example earlier.

We'll start by creating a Function Output custom property

Add this to your component and name it "Add Cat"

We then need to add two parameters:

• InputString | Text | This is the text we wish to manipulate | Required

• Cattiness | Number | How many cats! | Optional

Those parameters can be used when calling the function to influence the function, as per the code we'll write shortly.

The next task is to write the logic for our function ✏️

You can now select the "Add Cat" custom property, or find it in the property drop down [Top Left!]

Note how our parameters are displayed here, we can open each parameter and manipulate it's default value. This is really important when we work with records or tables as we'd need to define the default schema of these. For now we can keep Cattiness and InputString as 100 and "Text" respectfully.

Select "AddCat" and enter the following formula:

With(
    {
        cats: ForAll( //For x Cattiness, add a cat
                Sequence(
                    Cattiness),
                    "🐈")
    },
    $"{InputString} {Concat(cats,Value)}") //Concat and return string

☝️ This mimics what I did in PowerShell by adding x cats to the end of "InputString". The last line sets AddCat to the string value to return to the app.

That's it! Let's get testing!

Go ahead and add the component into an app, along with two text boxes and a slider for good measure.

Well, it's not exactly Kristine Kolodziejski level UX material, but it'll do for now!

In the example above, we're using a text box to capture our InputString, a slider to capture the cattiness of it all 😸 and a third text box with DisplayMode = "view" to display the result of our function.

Now set the output text box to the following code, replacing component names accordingly:

cmp_Demo.AddCat(txtInputString.Text, sld_Cats.Value)
//cmp_Demo = our component

And, viola! You've created a reusable function!

Easy! Right? And here's some tips to take away:

• Functions will work if your component is invisible. So go ahead and set that functions-only component's visibility to a big fat !true

• But consider reducing your component 👣 You could try adding functions in commonly used components.

• Make sure your makers know the functions are there! 👀 Use my previous tip of including a "Readme" input property to help unearth your shiny functions!

• You cannot access the components Variables or Input/Output values in a Function. These are completely independent code blocks in your components and rely on Input Parameters.

• We just wrote an output function, but you can also write input functions as well! So you can offer the ability to write functions from the app INTO the component. But I'm not 100% why... 🤯

Thanks for reading! Next time...

We're going to crack Actions and see how they differ to functions. 🦀

Whether it's using an AutoHotKey Script to start my comments out in code, or waiting for all the washing up to pile up so I can tackle it in one go, and not waste hot water......... I'm a big fan of reusability. Build once, Deploy many.

If you've built a canvas app, and found yourself having to make a small tweak to many different screens on an element that is consistent across one or more screens. Then some or most of the elements in your app are probably a good candidate for a Component Library. 🤔

They're great for components such as:

• Headers

• Loading Spinners 💫

• Toolbars 🛠

• Forms 📃

• Complex Labels

• Pop-ups ❗

• Or just building something completely custom and cool 🔧😎

When we start talking about Ecosystem enablement, Component Libraries are an absolutely fundamental digital building block that can be utilised by your maker population to speed up build and delivery of solutions across your organisation. They require appropriate nurturing, promotion and governance to get the best out of them.

Your first port of call is to install the Creator Kit as this may already contain everything you and your makers need. However, if you need something more bespoke; continue 🚗

If the creator kit isn't what you want, or you want to put your own touch on the basics, create a base Component Library with some basic components that align to your organisation branding standards that your makers can start using right away. They're dead easy to make (about as easy as a Canvas App) and they can save some time for your makers who can now focus on delivering their solution.

Just make sure the Makers know how to install these new components!

At ANS, we were faced with the challenge of building multiple custom pages for a Model-Driven App between multiple makers. It was really important that we built a consistent experience for the end users; but giving a Figma design to 3 makers and expecting them all to interpret it the same way was never going to be an efficient approach.

We chose to use a component library so that all the styling and functionality was pre-built, we could also be safe in the knowledge that supporting each others pages would be possible, as we understood how the components of each page worked.

Ultimately this led to new custom pages being laid out in sub-1 minute time frames and let the makers focus on code and logic. We kept the experience consistent across all these pages and could make centralised changes to the component library to speed up with updating every page.

Here are some tips for building a component library:

Accessibility doesn't go away

You MUST continue to incorporate Tab Indexing, Tooltips and accessibility labels just like any Canvas App or Custom Page. Components will be read in Z-Formation by a screen reader (That is, Left to Right, Top to Bottom), see a short demo below on how this looks with Microsoft Narrator. Get those yellow triangles taken care of ⚠🔨

Remember, Responsive Design

Your components could be used in Custom Pages, Phone App or Tablet App. Remember to consider either building fully responsive, or tailoring components for different form factors (i.e. Phone or Tablet).

Keep it (the components) simple!

Don't make one massive component, make lots of smaller components that can piece together. For example, make a header, toolbar and form, rather than an entire screen component that does all three.

Keep it (the code) simple!

Try to avoid using Variables or Collections within the components purely for outputting data. For example, if you need to output a table in a certain format; rather than saving to a collection and pushing that collection to an output, consider using the ForAll() or AddColumns() functions to structure the table output on-the-fly.

Keeping this in the output property helps other devs easily find how and where the output is compiled.

Guiding your Makers

Adding a "Read Me" input property can help your users understand how your component works and how to use it (i.e. putting data in, getting data out, how to make it do the thing). Make sure you comment this out so it doesn't actually do something! 🙀.

Avoid "Property Fatigue"

Adding lots of properties to a component can make it unmanageable and sometimes even daunting to use. Try to limit individual properties and group properties together as record inputs. A great idea from James Ryan.

Build your components with customisation in mind

Keep your components useful and relevant by making it easy to change the colour scheme, border thickness and even the padding. Consider making this a record input with a pre-defined schema to avoid "Property fatigue" on the component.

Components ultimately reside in the msapp file

This is important to remember, because changes MUST be imported into your app, updating the component library on it's own is not enough to apply changes. Importing a component from a component library adds it to your App, rather than referencing it from the component library.

You can implement Custom Connectors in Component Libraries

Ensure you manage the deployments of your Custom Connectors across environments, but yes, you can absolutely add Custom Connector functionality to a Component Library.

Next time

That's it for now! Next time I'll be exploring how the different behaviours work in Components and how you can build re-usable code!