In this application, we are required to fetch the selected employees’ leave request PDF files from the document library and provide a way for them to download those files. We achieved this with the help of the Power Apps Download().

In this article, I will explain the Power Apps Download function and how to download a file from the Power Apps gallery with a few examples.

Power Apps Download Function

In Power Apps, the Download function allows users to download files directly from the app to their devices. It supports various file types and allows access to documents, images, and other content.

Syntax:

Download(Address)

Here,

• Address = Required parameter; provide the address within the download function.

Power Apps Download File From Gallery

Let’s see how to download files from the Power Apps gallery. In the example below, I have two gallery controls: one contains employee leave requests, and the other contains pdf files of selected employees. When I click on the Download icon, the files are getting downloaded.

Here is the SharePoint list named “Employee Leave Request,” which has the following columns.

The SharePoint document library named “Leave Request Files” below contains the employees’ leave pdf files.

Follow the steps below to achieve this!

Add the above SharePoint list and library to the Power Apps application.

1. In Power Apps, for the App object’s OnStart property, provide the code below to create a collection for storing SharePoint document library files.

ClearCollect(colEmployeeLeaveRequestFiles,'Leave Request Files');

Here,

• colEmployeeLeaveRequestFiles = collection name.
• ‘Leave Request Files’ = SharePoint document library name.

2. In Power Apps, add a gallery control and connect it with the SharePoint list by providing the list name in its items property.

'Employee Leave Requests'

3. Add another gallery and provide the code below in its items property to fetch the PDF files of the selected user.

Filter(
    colEmployeeLeaveRequestFiles,
    StartsWith(
        Name,
        Gal_LeaveDetails.Selected.'Employee Name'.DisplayName
    )
)

Here,

• The StartsWith() function will get the PDF files with the starting name matched with the gallery-selected employee name.
• Filter() function only gets the gallery-selected employees to leave PDF files from the document library.

3. Add a download icon to the PDF files presented gallery and provide the code below in its OnSelect property.

Download($"https://szg52.sharepoint.com/sites/RetailManagementSite/_layouts/download.aspx?SourceUrl=https://szg52.sharepoint.com/sites/RetailManagementSite/{ThisItem.'Full Path'}")

Here, change the URL “https://szg52.sharepoint.com/sites/RetailManagementSite/_layouts/” with your SharePoint site.

4. The PDF image can be displayed statically or dynamically with the file extension. Since we have all PDF files, we can use the PDF icon next to each file.

To dynamically display an image of the file with its extension, add the code below to the Image property of the image control.

$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Last(Split(ThisItem.'File name with extension',".")).Value}.svg"

This URL fetches the image of the file with its extension.

5. Save and publish the app once. While previewing, click on the download icon next to the file to see that the file has been downloaded.

This way, we can download files directly from the Power Apps gallery view.

I hope you understand the Power Apps download function and how to download a file from the Power Apps gallery. You can follow this article while trying to download files from Power Apps.

Also, you may like:

• Power Apps search function
• Power Apps add columns function
• Power Apps count rows function
• Power Apps date filter function
• Create Status Indicator Using Power Apps
• Power Apps Copy Function

In this article, I will explain the Power Apps Copy Function, its syntax, and how to use the Copy function in the Power Apps Canvas app. Along with that, we will also discuss the topics below:

• How to copy text to the clipboard in Power Apps
• Power Apps copy the table to the clipboard
• Power Apps copy the collection to the clipboard

Power Apps Copy Function

The Copy() function in Power Apps copies the text value directly to the clipboard. This function accepts any text string as its argument. We can use this function in any behavior properties(e.g., OnSelect, OnChange), typically triggered by user actions like clicking a button or icon.

Syntax:

Copy(text)

The copy function is limited to the app’s host’s access to the clipboard. Therefore, embedded apps, such as those in SharePoint, Power BI, or Teams, do not support this function.

Let’s see an example of copying the text to a clipboard.

Power Apps Copy Text to Clipboard

Look at the example below. When I click on the copy icon, the email in the text input control is copied and can be pasted into another text input control.

Follow the steps below to achieve the above example.

1. In Power Apps, add two text input controls for copying and pasting the email text.

2. Add a copy icon from the +Insert tab. Then, add the code below to its OnSelect property.

Now, save the changes. While previewing, provide an email in the text input control and click on the copy icon. Then, on the following input control, paste the copied text by clicking ctrl+ V on the keyboard.

Power Apps Copy Table to Clipboard

Look at the example below. I have displayed details of the upcoming workshop in the Power Apps gallery. After clicking on the copy icon, the details are copied, and then in the Excel sheet, when I click Ctrl + V, the details are displayed in table format.

Follow the steps below to achieve this!

1. In Power Apps, add a gallery control and connect it with the SharePoint list by providing the list name in its OnSelect property.

'Upcoming PowerApps Work Shops'

‘Upcoming PowerApps Work Shops’ is the SharePoint list name.

2. Provide the below formula on each label’s OnSelect property within the gallery control.

Copy(Self.Text)

Self.Text will take current data.

3. Add a copy icon and provide the below formula on its OnSelect property.

Copy(
    Concat(Gal_WorkshopDetails.AllItems, 
           lbl_Title.Text & Char(9) & lbl_Date.Text & Char(9) & lbl_presenter.Text & Char(10)
    )
);

The Concat function will concat all the details in each text label in the Power Apps gallery control.

• lbl_Title = Contains workshop title
• lbl_Date = Contains the workshop conducted to date
• lbl_presenter = Contains the workshop conducted presenter name

4. Now, save changes and preview the app. Then, click on each label in the Power Apps gallery control and click on the copy icon. In Excel, click on ctrl+V, and you’ll see the copied data in the excel.

Power Apps Copy Collection to Clipboard

With the Power Apps copy function, we can copy the collection to a clipboard and paste it anywhere. In the example below, you can see I have created a collection by clicking on the button control; later, click on the copy icon. I have now copied the collection in Excel.

Follow the steps below to achieve this!

1. Add a button control in the Power Apps and provide the below formula in its OnSelect property.

ClearCollect(colEmployees, 
    { Name: "Alice" }, 
    { Name: "Bob" }, 
    { Name: "Charlie" },
    {Name:"John"}
);
Set(NamesToCopy, Concat(colEmployees, Name & Char(10)));

Here, colEmployees is the collection name that contains sample employee names. NamesToCopy is the variable name that stores the concatenated employee names with a new line. Char(10) is used to create a new line.

2. Add a copy icon and the formula below in its OnSelect property.

Copy(NamesToCopy);

3. Now, save the changes and preview the app. Click on the button control to create a collection, then check whether the collection has been created or not. Later, click on the copy icon and paste it into Excel.

This way, we can copy the text from the controls in Power Apps and paste it anywhere.

I hope you understand the Power App copy function. In this article, I have explained various examples of copying and pasting text from Power Apps controls. You can follow this article while trying to copy the text from Power Apps control to outside the app or within the app.

Also, you may like:

• Power Apps Calendar Function With Examples
• Power Apps count function
• Power Apps sequence function
• Power Apps sort function
• Power Apps Modern Form Control
• Power Apps Download Function

To check if a string is empty in TypeScript, you can use the length property by verifying if str.length === 0, or use strict equality by comparing the string directly to an empty string with str === "". Additionally, to handle strings that contain only whitespace, you can use str.trim().length === 0. These methods ensure proper validation of user inputs in your applications.

Check for Empty Strings in TypeScript

As a developer, you should check for TypeScript empty strings in scenarios such as form validation, data processing, and ensuring the integrity of user inputs. An empty string can lead to errors or unexpected behavior if not handled correctly.

There are various methods to check if a string is empty in TypeScript. Let me explain each method with examples.

1. Using the Length Property

The simplest way to check if a string is empty in TypeScript is by using the length property. If the length of the string is zero, then the string is empty.

Here is the TypeScript code.

function isEmpty(str: string): boolean {
    return str.length === 0;
}

// Example
const userName = "JohnDoe";
console.log(isEmpty(userName)); // Output: false

const emptyString = "";
console.log(isEmpty(emptyString)); // Output: true

I executed the above code using VS code, and you can see the output in the screenshot below:

Check out How to Filter Empty Strings from an Array in TypeScript?

2. Using Strict Equality

Another method is to compare the string directly to an empty string using strict equality (===). Here is the complete code to check if a string is empty using a strict equality operator.

function isEmpty(str: string): boolean {
    return str === "";
}

// Example
const city = "San Francisco";
console.log(isEmpty(city)); // Output: false

const noCity = "";
console.log(isEmpty(noCity)); // Output: true

Here is the exact output you can see in the screenshot below:

3. Handle Whitespace

Sometimes, you might want to consider strings that contain only whitespace as empty. In this case, you can use the trim() method before checking the length or using strict equality.

Here is an example to check if the string is empty in TypeScript.

function isEmptyOrWhitespace(str: string): boolean {
    return str.trim().length === 0;
}

// Example
const address = "   123 Main St   ";
console.log(isEmptyOrWhitespace(address)); // Output: false

const emptyAddress = "   ";
console.log(isEmptyOrWhitespace(emptyAddress)); // Output: true

Check out Check if a String Contains a Substring in TypeScript

4. Using Type Guards

TypeScript’s type guards can also be used to ensure that the input is a string before performing the check. This is particularly useful in scenarios where the input might be of various types.

function isString(value: any): value is string {
    return typeof value === 'string';
}

function isEmptyString(value: any): boolean {
    return isString(value) && value.length === 0;
}

// Example
const state = "California";
console.log(isEmptyString(state)); // Output: false

const noState = "";
console.log(isEmptyString(noState)); // Output: true

const numberValue = 12345;
console.log(isEmptyString(numberValue)); // Output: false

Here is the exact output in the screenshot below:

Check out How to Capitalize the First Letter in TypeScript?

5. Combine Checks for Null, Undefined, and Empty

In some cases, you might want to check for null, undefined, or empty strings all at once. This can be done using a combination of conditions. Here is the complete code.

function isNullOrEmpty(str: string | null | undefined): boolean {
    return str === null || str === undefined || str.trim().length === 0;
}

// Example
const country = "USA";
console.log(isNullOrEmpty(country)); // Output: false

const noCountry = "";
console.log(isNullOrEmpty(noCountry)); // Output: true

const undefinedCountry = undefined;
console.log(isNullOrEmpty(undefinedCountry)); // Output: true

TypeScript string is null or empty

Let me show you how to check if a string is null or empty in TypeScript.

To check if a TypeScript string is null or empty, you can use the following two methods:

1. Using Strict Equality and Length Check

This method combines checking for null and undefined with verifying if the string length is zero.

function isNullOrEmpty(str: string | null | undefined): boolean {
    return str === null || str === undefined || str.length === 0;
}

// Example
const name1: string | null = "Alice";
console.log(isNullOrEmpty(name1)); // Output: false

const name2: string | null = "";
console.log(isNullOrEmpty(name2)); // Output: true

const name3: string | null = null;
console.log(isNullOrEmpty(name3)); // Output: true

const name4: string | undefined = undefined;
console.log(isNullOrEmpty(name4)); // Output: true

Here is the exact output you can see in the screenshot below:

Check out How to Split String by Length in Typescript?

2. Using Trim() Method for Whitespace Handling

This method ensures that strings containing only whitespace are also considered empty by using the trim() method before checking the length.

function isNullOrWhitespace(str: string | null | undefined): boolean {
    return str === null || str === undefined || str.trim().length === 0;
}

// Example
const address1: string | null = "123 Main St";
console.log(isNullOrWhitespace(address1)); // Output: false

const address2: string | null = "   ";
console.log(isNullOrWhitespace(address2)); // Output: true

const address3: string | null = null;
console.log(isNullOrWhitespace(address3)); // Output: true

const address4: string | undefined = undefined;
console.log(isNullOrWhitespace(address4)); // Output: true

These methods ensure that your TypeScript application robustly handles strings that are null, undefined, or empty, improving data validation and user input handling.

Conclusion

Validating strings to check if they are empty is important in TypeScript to avoid errors. By using methods such as checking the length property, using strict equality, handling whitespace, applying type guards, and combining checks for null or undefined, you can ensure that you are checking if a string is empty before. I also explained how to check if a string is null or empty in TypeScript using different methods.

You may also like:

• Split String By New Line in Typescript

In this article, I will explain the following topics:

• How to use Power Apps modern form control
• Power Apps submit modern form data to the SharePoint list

How to Use Power Apps Modern Form Control

In Power Apps, to get the modern form control, we first need to enable the modern controls in Settings. Follow the steps below to do this!

1. In the Power Apps application, click on ellipses (…) on the top navigation -> Click on Settings.

2. From Updates -> Under New -> Enable Modern controls and themes.

3. Click on +Insert tab in top navigation ->Under Layout -> Select Form (preview).

I have a SharePoint list named “Employee Leave Requests.”

4. Connect the Power Apps modern form control with the data source. Here, I connected with the SharePoint list.

DataSource = 'Employee Leave Requests'

5. To add the fields into the Form control-> Go to the Properties -> Click on Edit fields -> Click on +Add field. ->Select the fields and click on Add.

By default, it adds only a few fields.

6. As in the example below, You can also drag and drop the fields in the Power Apps modern form control.

7. To change the properties of the fields in modern form control, click on the field, go to the Advanced section, and click on Unlock to change properties.

8. Power App’s modern form control has a Layout property to change the layout, like

• Horizontal
• Vertical

Also, the Column property enables us to provide the number of columns present in the form control. To use the above two properties, look at the example below.

9. Choose New for the Default mode property. We must make the form control new to submit data to the data source.

10. Look at some of the new properties for designing the field title(DataCardKey) present within the data card of the field.

11. Look at the properties for DataCardValue in each field datacard in the Power Apps modern form control.

12. To change the default text for the choice field in the Power Apps form control. Click on the data card value -> Open Properties -> Advanced -> InputTextPlaceholder -> Provide the custom text within quotes.

13. A modern combo box control won’t display all the people’s names if the form control has a person field. Many people face the same issue.

Here, I will explain an alternative solution to this problem. Connect the Power Apps application with Office365Users.

14. Then, add the code below to the OnStart property of the App object.

ClearCollect(
    UserCollection,
    Office365Users.SearchUser({
        searchTerm: "",
        top: 999
    })
);
AddColumns(UserCollection, 
    Claims, UserPrincipalName,
    Email, Mail,
    DepartmentName, Department
);

I created a collection named UserCollection, containing all Microsoft 365 users. I took the top 999; you can take the number according to your wants.

Also, UserCollection contains columns like Claims, Email, and DepartmentName.

15. Provide the below collection name in the items property of the Employee Name data card value. Also, provide the same collection name for the Team Lead data card Value.

Note: In case, you’re using different example then in place of person fields’ data card values’ items property provide this collection name.

UserCollection

16. Add the below code in the Update property of the Employee Name DataCard.

{
    '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
    Claims: "i:0#.f|membership|" & DataCardValue_EmpName.Selected.Mail,
    Department: "",
    DisplayName: DataCardValue_EmpName.Selected.DisplayName,
    Email: DataCardValue_EmpName.Selected.Mail,
    JobTitle: "",
    Picture: ""
}

Here, DataCardValue_EmpName is the employee name’s data card value name.

17. Add the below formula in the Update property of the Team Lead Data Card.

{
    '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
    Claims: "i:0#.f|membership|" & DataCardValue_TeamLead.Selected.Mail,
    Department: "",
    DisplayName: DataCardValue_TeamLead.Selected.DisplayName,
    Email: DataCardValue_TeamLead.Selected.Mail,
    JobTitle: "",
    Picture: ""
}

DataCardValue_TeamLead is the team lead data card value name.

Now, save all the changes, and to submit the form details, follow the below section.

Submit Power Apps Modern Form Data to SharePoint List

In Power Apps, we must use the SubmitForm() function to submit the form data to the SharePoint list.

Syntax:

SubmitForm( FormName )

FormName is a required parameter. Provide the name of the form within the above function.

Add a button control to save the form data to the data source. Provide the code below for its OnSelect property.

SubmitForm(Form)

Save changes and Preview app: after filling in the leave request details in the form control, click the save button control.

I hope you understand how to use Power App’s modern form control and the properties of data card keys and values. I also explained how to get Microsoft 365 users into the person field in the form control and save those fields’ data to the SharePoint list.

The Power Apps modern form control can be used as an alternative to the classic form; it provides various properties and designs that look like professional forms.

Also, you may like:

• Power Apps modern combo box control
• Power Apps modern slider control
• Power Apps modern toggle control
• Power Apps modern radio group control
• Power Apps modern check box control
• Power Apps Calendar Function With Examples

I developed a calendar view project task tracker in the Power Apps application using those calendar functions a few days before. In this article, I will explain the Power Apps calendar function and display Power Apps gallery items in the calendar view.

Power Apps Calendar Function

The table below shows the Power Apps Calendar function formulas for getting Months’ and Weeks’ names in both long and short form.

Function	Example
Calendar.MonthsLong()
Calendar.MonthsShort()
Calendar.WeekdaysLong()
Calendar.WeekdaysShort()

Power Apps Convert Gallery View to Calendar View

The example below shows that the Power Apps gallery control contains project task tracker details; after clicking the switch to calendar view button control, it navigates to calendar view screen; there, you can see,

• The task’s names are on the respective due dates within the calendar.
• To differentiate the tasks based on status, we’ve used the below colors,
  • Red = Not Started
  • Blue = In Progress
  • Green = Completed
• We can see the dates for the next and previous months and the tasks presented on their respective due dates.
• Again, we can switch back to the gallery view.

Here is the SharePoint list named Task Tracker, which contains the task details.

Follow the steps below to achieve this!

1. In Power Apps, add a Gallery control and connect it with the SharePoint list by providing its name in the gallery’s items property.

'Task Tracker'

2. Provide the formula below for the OnStart property of the App object.

Set(varCurrentDate,Date(Year(Today()),Month(Today()),1))

This formula is fetching the first day of the current month. Here,

• varCurrentDate = Global variable contains the current month’s first date.
• Today() = Retrieves current date.
• Year(Today()) = Extracting the current year from the current date.
• Month(Today()) = Extracting the current month from the current date.
• Date(Year(Today()),Month(Today(),1) = Date function creates the dates present in the current year and current month. 1 represents the first date from all the dates.

3. Add a new screen within that, add a blank vertical gallery, and provide the formula below in its OnSelect property.

• Also, give the Wrap count property value as 7.
• Template Size = Parent.Height/8.

ForAll(Sequence(42),Value+varCurrentDate-Weekday(varCurrentDate))

Here, the

• Sequence(42) = This function creates a series of numbers from 1 to 42. The reason for taking 42 is that in a calendar for each month, there are a fixed 6 rows and 7 columns. So, we required 6* 7=42 cells to represent the dates in a calendar.
• The ForAll function iterates and performs calculations over each value the sequence function generates.
• varCurrentDate is the global variable we created in the onstart property of the app object, which contains the first date of the current month.
• Weekday() = Gives the weekday number of provided date. The weekday numbers are (1 for Sunday,2 for Monday, 3 for Tuesday, etc, up to 7).
• Let’s look at the example below to understand Value +varCurrentDate-Weekday (varCurrentDate).

Note: varCurrentDate = 1st October 2024. So, Weekday = 3 (Tuesday ). Value = 1 to 42.

4. Add the formula below to the Text property of the label present in the gallery control.

Day(ThisItem.Value)

The Day function gets the day from the date.

Also, fill in the below values for the given properties.

Height = Parent.TemplateHeight
Width = Parent.TemplateWidth
Align = Align.Center
VerticalAlign = VerticalAlign.Middle
Border = 1 
Color = If(Month(ThisItem.Value) <> Month(varCurrentDate),RGBA(116, 116, 116, 1), RGBA(50,49,48,1))
Fill = If(ThisItem.Value=Today(),RGBA(204, 208, 225, 1),Color.White)

The formula in the Color property indicates that if the day were not in the current month, it would be a different color from the day in the current month.

Fill property indicates the provided RGBA color will be applied for the current day.

5. Add another gallery control on the same screen and provide the formula below in its items property.

Calendar.WeekdaysShort()

Also, set its Wrap count to 7 and provide the formula below to the Text property of the label in the gallery.

ThisItem.Value

It displays all the week’s names in short form within the gallery.

6. Now, to display the month name dynamically as a heading. Add a text label and provide the below formula in its Text property.

Text(varCurrentDate,"mmmm yyyy")

It displays the date present in the varCurrentDate variable in the format of “mmmm yyyy”

7. To get the previous months’ and next month’s dates, add three button controls and provide the below code in each OnSelect property.

Previous button's OnSelect property : Set(varCurrentDate,Date(Year(varCurrentDate),Month(varCurrentDate)-1,1))

Today button's OnSelect property :
Set(varCurrentDate,Date(Year(Today()),Month(Today()),1))

Next buttons's OnSelect property:
Set(varCurrentDate,Date(Year(varCurrentDate),Month(varCurrentDate)+1,1))

8. Preview the app once and click on the previous and next buttons. You can see the dates for each month are exactly present in the calendar.

9. To display the tasks on their due dates in the calendar, add a gallery control within the calendar gallery control as in the image below.

Provide the below code in its items property.

Filter('Task Tracker',DueDate=ThisItem.Value)

10. Now, add the following properties to the text label present within the gallery.

Text = ThisItem.Title

Fill = If(
    ThisItem.Status.Value = "Not Started",
    RGBA(253, 222, 207, 1),
    ThisItem.Status.Value = "In Progress",
    RGBA(109, 49, 162, 0.46),
    ThisItem.Status.Value = "Completed",
    RGBA(209, 232, 178, 1)
)

Based on the status value of each task, the color will be applied to the text label.

11. Add a button control to the current screen to navigate back to the gallery view screen. Provide the code below for its OnSelect property.

Navigate(TaskTracker_GalleryScreen);

Here, TaskTracker_GalleryScreen is the screen name.

12. To navigate to the calendar view screen, add a button control in the gallery view screen and give the formula below to its OnSelect property.

Set(varCurrentDate,Date(Year(Today()),Month(Today()),1));Navigate(TaskTracker_Calender);

Here, the varCurrentDate variable contains the current month’s 1st date. TaskTracker_Calender is the screen name.

Save the changes and preview the app. This way, we can create a Power Apps calendar view from the gallery view.

I hope you understand how to convert the Power Apps gallery view to a calendar view. In this article, I also explained the Power Apps calendar function with examples and how to create calendar view examples.

You follow this approach to track tasks based on their due dates. You can also use this approach for other scenarios where you must notify employees based on due dates.

Also, you may like:

• Power Apps Split Function
• Power Apps Print Function
• Power Apps date functions
• Power Apps timer control
• Date format in Power Apps data table
• Power Apps Modern Form Control
• Power Apps get dates from current week

To check if a string contains a substring in TypeScript, use the includes() method. This method returns a boolean value indicating whether the specified substring is present within the string. The syntax is straightforward: string.includes(substring), and it is case-sensitive by default. For example, "New York, USA".includes("USA") would return true.

Check if a String Contains a Substring in TypeScript

TypeScript, being a superset of JavaScript, provides several ways to determine if a string contains a specific substring. Below, I will cover the most commonly used methods.

1. Using the includes() Method

The includes() method in TypeScript is the best way to check if a string contains a substring. This method is case-sensitive and returns a boolean value.

Syntax

string.includes(searchString, position);

• searchString: The substring to search for.
• position (optional): The position in the string at which to begin searching. Default is 0.

Example

Now, let me show you an example to help you understand this.

const destination: string = "New York, USA";
const keyword: string = "USA";

if (destination.includes(keyword)) {
    console.log("The destination includes 'USA'.");
} else {
    console.log("The destination does not include 'USA'.");
}

In this example, the console will log “The destination includes ‘USA’.” because the substring “USA” is present in the string “New York, USA”.

I executed the above TypeScript code, and you can see the exact output in the screenshot below:

Check out How to Capitalize the First Letter in TypeScript?

2. Using the indexOf() Method

The indexOf() method returns the index of the first occurrence of a specified substring in TypeScript. If the substring is not found, it returns -1. This method is also case-sensitive.

Syntax

string.indexOf(searchValue, fromIndex);

• searchValue: The substring to search for.
• fromIndex (optional): The position in the string at which to begin searching. Default is 0.

Example

Here is an example to check if a string contains a substring in TypeScript.

const city: string = "San Francisco, USA";
const searchString: string = "USA";

if (city.indexOf(searchString) !== -1) {
    console.log("The city includes 'USA'.");
} else {
    console.log("The city does not include 'USA'.");
}

Here, the console will log “The city includes ‘USA’.” since “USA” is found within the string “San Francisco, USA”.

Here is the exact output in the screenshot below:

Check out How to Split String By New Line in Typescript?

3. Using the search() Method

The search() method in TypeScript uses a regular expression to perform the search and returns the index of the first match. If no match is found, it returns -1.

Syntax

string.search(regexp);

• regexp: A regular expression object.

Example

Let me show you an example.

const location: string = "Houston, USA";
const regex: RegExp = /USA/;

const result: number = location.search(regex);

if (result !== -1) {
    console.log("The location includes 'USA'.");
} else {
    console.log("The location does not include 'USA'.");
}

In this example, the search() method returns the index of the first occurrence of “USA”. Since “USA” is found in the string “Houston, USA”, the console will log “The location includes ‘USA’.”

Check out How to Split String by Length in Typescript?

4. Using Regular Expressions

Regular expressions provide a powerful way to search for patterns within strings. The test() method of a regular expression can be used to check for the presence of a substring in TypeScript.

Syntax

regexp.test(string);

• regexp: A regular expression object.
• string: The string to search within.

Example

Here is an example.

const address: string = "Chicago, USA";
const pattern: RegExp = /USA/;

if (pattern.test(address)) {
    console.log("The address includes 'USA'.");
} else {
    console.log("The address does not include 'USA'.");
}

In this example, the console will log “The address includes ‘USA’.” because the regular expression /USA/ matches the substring “USA” in “Chicago, USA”.

Here is the exact output in the screenshot below:

Check out How to Convert String to Number in TypeScript?

5. Case-Insensitive Search

If you need to perform a case-insensitive search, you can use the toLowerCase() method in conjunction with includes(), indexOf(), or regular expressions.

Example

Let me show you an example.

const place: string = "Miami, usa";
const searchTerm: string = "USA";

if (place.toLowerCase().includes(searchTerm.toLowerCase())) {
    console.log("The place includes 'USA' (case-insensitive).");
} else {
    console.log("The place does not include 'USA' (case-insensitive).");
}

In this case, the console will log “The place includes ‘USA’ (case-insensitive).” because both strings are converted to lowercase before the comparison.

Here is the exact output in the screenshot below:

Conclusion

In this tutorial, we have explored various methods to check if a string contains a substring in TypeScript. Whether using the includes() method, indexOf(), search(), or regular expressions, etc.

You may also like the following tutorials:

• How To Split String And Get Last Element In Typescript?
• TypeScript Split String Into Array
• How to Split String by Regex in TypeScript?

I had to split the string into individual characters to fetch only numbers from GUID. I achieved this with the Power Apps split function.

In this article, I will explain how to use the Power App split function with various examples. Such as:

• Split full name into first and last names in the Power Apps gallery
• Create a collection from a comma-separated string in Power Apps
• Power Apps split guid string by character and fetch only numbers from it
• Power Apps split string by a new line
• Split Email address in Power Apps
• Power Apps Split date and time with the Concat function
• Power Apps split a string into rows and columns

Power Apps Split Function

In Power Apps, the Split function is commonly used to divide a string into individual values using the delimiter (separator). The separator can be zero, one, or more characters. This function returns the entire string if the separator is not found in the string.

Look at the syntax of the Power Apps split function.

Split( Text, Separator )

• Text = Required parameter. Text to split.
• Separator = Required parameter used to split the string. It can be zero, one, or more characters.

Let’s see the examples of the Power Apps split function.

Example 1: [Split full name into first and last names in Power Apps gallery]

1. In Power Apps, add gallery control and provide the formula below in its Items property.

[
    {Product: "Laptop-Electronics"},
    {Product: "Table-Furniture"},
    {Product: "Shoes-Fashion"},
    {Product: "Phone-Electronics"}
]

2. Add a text label to the gallery control to display only the first name and provide the formula below in its Text property.

First(Split(ThisItem.Product, "-")).Value

Here,

• ThisItem.Product = The string to split.
• “-“ = Seperator.
• The First () function will fetch only the first word after splitting the string with the “-” separator.

3. Add another text label to the gallery control to display the last name and provide the formula below in its Text property.

Last(Split(ThisItem.Product, "-")).Value

Here, the Last() function gets last from the split string.

Example 2: [Create a collection from a comma-separated string in Power Apps]

1. Add a button control in the Power Apps screen from the +Insert tab. Then, provide the formula below for its OnSelect property.

ClearCollect(colEmployess,Split("Liam,Noah,Oliver,James,Elijah,Theodore",","))

Here,

• ClearCollect() function creates a collection.
• colEmployess = Collection name.
• “Liam,Noah,Oliver,James,Elijah,Theodore” = String that contains names.
• “,” = Separator.

2. Save the changes and click the button control while previewing. Then, in the left navigation, click (x) Variables -> Under Collections ->Open the created collection. You’ll see the string provided on the button control split into individual names in the collection.

Example 3: [Power Apps split guid string by character and fetch only numbers from it]

1. Add a button control to the Power Apps screen and provide the formula below in its OnSelect property.

Set(varDigits,FirstN(Filter(Split(GUID(),""),IsNumeric(Value)),5));

Here, the split function will split each character in the guid string. The IsNumeric() function will check each character from the split string and whether it is a number.

The Filter function only fetches all numbers from the GUID string after splitting it into each character stored in table format. The FirstN() will fetch only five numbers from all the numbers.

2. To see the created global variable, click on the (x) Variable on the left navigation -> Under Global variables -> click on ellipses(…) next to the variable -> click on View Table.

3. Look at the image below; it fetches only five digits from the guide string.

Example 4: [Power Apps split string by a new line]

1. Add a Data Table control to the Power Apps screen and add the formula below to its Items property.

Split("Power Apps is a Microsoft Product Allows to Develop Applications"," ")

2. To add the column -> Open the Properties of the Data Table control -> Click on Fields -> +Add field -> Check Value -> Click Add button.

3. Now, look at the table; each word in the given sentence is placed in a new line in the Power Apps data table control.

Example 5: [Split Email Address in Power Apps]

1. Add the formula below in the Data Table control‘s Items property.

Split("Patti@szg65.onmicrosoft.com","@")

2. To split the email address with the dot(.) separator, place the formula below in the Items property of the data table control.

Split("Patti@szg65.onmicrosoft.com",".")

3. To split the email address by taking multiple characters as a separator, use the below formula.

Split("Patti@szg65.onmicrosoft.com","szg")

Example 6: [Power Apps Split date and time with Concat function]

Follow the steps below to achieve this!

Here, I have a SharePoint list named “Public Holidays.” which stores all the holiday dates.

1. Add a button control in the Power Apps screen to create a collection that stores all the holiday dates from the SharePoint list.

2. Add a Data Table control and provide the below collect name in its Items property.

colHolidayDates

3. To split the dates, add the formula below to the Text property of the column in the data table control.

Concat(Split(ThisItem.HolidayDate,"/"),Value," ")

Here, using space, the Concat function will concat the dates that are split by “/.”

Example 7: [Power Apps split a string into rows and columns]

Look at the image below. In the text label, I have the addresses of some cities in the USA, which is in not an understandable format. After using the Power Apps split function, the addresses are split into rows and columns in the data table.

Follow the steps below to achieve this!

1. In Power Apps, add a Text label and provide the address collection in its Text property.

 "47 W 13th St, New York, NY 10011, USA,20 Cooper Square, New York, NY 10003, USA,1 E 2nd St, New York, NY 10003, USA,75 3rd Ave, New York, NY 10003, USA,Metrotech Center, Brooklyn, NY 11201, USA,19 Washington Square N, New York, NY 10011, USA,70 Washington Square South, New York, NY 10012, United States,100 Bleecker St, New York, NY 10013, USA,Rubin Residence Hall, New York, NY 10003, USA"

2. Add a data table control and provide the below formula in its Items property.

With({items:Split(lbl_Address.Text,",")},         
     ForAll(Sequence(CountRows(items),1,4),
           {
              Address: Index(items,Value).Value,
              City: Index(items,Value +1).Value,
              ZipCode: Index(items,Value +2).Value,
              Country:Index(items,Value +3).Value
           }
     )
)

3. Add the columns to the data table by opening the Properties pane. There, click on Edit fields next to Fields -> Click on + Add field -> Check all the Column names -> Click on Add button.

4. Look at the image below; the addresses in the text label are split into rows and columns in the Power Apps data table control.

This way, we can use the Power Apps split function to split the string with the provided separator.

I hope you understand how to use the Power Apps split function. In this article, I have provided seven different examples related to its usage. Follow this article if you are new to Power Apps functions.

Also, you may like:

• Power Apps Print Function
• Power Apps search function
• Power Apps Copy Function
• Power Apps find function
• Power Apps for all function
• Power Apps startswith and ends with function
• Power Apps patch function

Here, I was required to provide a way for employees to print their approved travel request details, which I achieved using the print function in Power Apps.

In this article, I will explain what is Power Apps print function, its syntax, and how to use it in the canvas app. Additionally, we will discuss how to print a form in Power Apps with an example.

Power Apps Print Function

The Print function in Power Apps allows users to print content present on the screen to printers in their network or save to PDF through the browser.

We can use this function on buttons or icons on the “OnSelect” property. This will print only the screen where we gave it this print function. It can’t print multiple pages and won’t work on mobile devices and SharePoint forms.

Syntax:

Print()

How to Print a Form in Power Apps

Let’s see an example of printing the content present in the Power Apps screen.

In the Power Apps application, I have a gallery control that displays current users’ employee travel requests; when the user selects any request, it navigates to another screen. After clicking the print button, a default print browser pops up and allows us to choose from the available options to print or save it as a PDF file.

Here is the SharePoint list that contains details of employee travel requests.

Follow the steps below to achieve this!

1. Open the Power Apps application and add a verticle gallery control, then add the formula below to its Items property.

Filter('Employee Travel Request Details','Surname And Name' .DisplayName =User( ) .Full Na me)

It filters only current users’ travel requests in the gallery.

2. Provide the formula below in the OnSelect property of the gallery control to navigate to another screen when we select an item.

Navigate(PrintRequests_Screen,ScreenTransition.CoverRight)

• PrintRequests_Screen = screen name
• ScreenTransition.CoverRight = screen transition property

3. Click on +New Screen -> Select Portrait print screen from the menu. [You can also take the normal screen, but later adjust the width and height of the screen]

4. This screen will, by default, have a Horizontal container within that one button control also present. When we see the OnSelect property of the button control, it has the Print() function.

When you take a regular normal screen, add a button control and provide the formula below in its OnSelect property.

Print()

5. Add an Edit Form control and provide the below formulas for the given properties.

DefaultMode = FormMode.View
DataSource = 'Employee Travel Request Details'
Item = Gal_travelRequets.Selected
Columns = 1
Layout = Horizontal

6. Preview the app once; you’ll get the below popup that allows us to choose from the available options to print or save it as a PDF file. Finally, click the Print button to print or save the pdf file.

7. Follow the example below to provide values for the options in the pop-up message.

8. To navigate back to the employee travel request screen, I added the Home icon and provided the formula below on its OnSelect property for navigation.

Navigate(EmpTravelRequest_Screen,ScreenTransition.CoverRight)

While printing to hide this icon, I used the formula below for its Visible property.

Not PrintRequests_Screen.Printing

• PrintRequests_Screen is the current screen name.

9. I choose the Save as PDF for the Printer option while printing. After clicking the Save button, the content present in the form is saved as a PDF file; look at the image below.

This way, we can save or print the Power Apps content on the screen as a PDF file.

I hope you understand the Power Apps print function and how to save the content present on the screen as a PDF file or print it. Follow this article whenever you’re trying to print Power Apps content or save it as a PDF file.

Also, you may like:

• Power Apps PDF view control
• Power Apps Split Function
• Power Apps Calendar Function
• How to generate and download pdf from Power Apps
• How to apply multiple filters on Power Apps gallery
• How to calculate business days in Power Apps

After submitting the data, I had to fetch and display these flight and family details in a repeating table format, making it easier for employees to view and understand their entries.

In this article, I will explain how to show repeating table data from SharePoint list in Power Apps with a simple example.

Additionally, I will show you how to update the Items in PowerApps Repeating Table [Individual Items] to the SharePoint list.

Show Repeating Table Data From SharePoint List in Power Apps

Look at the example below. I have a gallery in Power Apps that contains employee travel requests. When I click on any item, it navigates to another screen, and the selected items’ full details are displayed in a Power Apps form control and repeating tables.

I have three SharePoint lists that store employee travel requests separately. The main SharePoint list, Employee Travel Request Details, is below.

Note: Travel ID and Employee Name are the common fields in all three lists.

Here is the SharePoint list that stores flight details for employee travel requests.

This is the SharePoint list that stores family details of employee travel requests.

Follow the steps below to achieve this!

1. Connect the Power Apps application with the above three SharePoint lists. Then, add a Power Apps gallery control on a new screen and provide the list name below in its Items property.

'Employee Travel Request Details'

2. Provide the formula below for the gallery control‘s OnSelect property. Before that, add a new scrollable screen and name it like in the first parameter of the navigate function.

Navigate(TravelRequest_Screen_View,ScreenTransition.CoverRight)

When we click on any item in gallery control, it will navigate to another screen with the help of the above formula.

• TravelRequest_Screen_View = Screen name.
• ScreenTransition.CoverRight = Screen transition property.

Note: On the scrollable screen, you'll see a Canvas object, and DataCard will be present, so we need to add the form and gallery controls to the data card. Unfortunately, we can't add a form control directly, so first add a Power Apps Container, and within that, we can add the remaining controls. 

3. Add a Power Apps form control to the “TravelRequest_Screen_View” screen. Then, add the below formulas to the provided properties.

DataSource = 'Employee Travel Request Details'
Item  = Gal_TravelRequests.Selected
DefaultMode = FormMode.View
Layout = Vertical
Columns =4

After providing all the above formulas to the respective properties, you can preview it once; whatever we select in the gallery will display the details in the form.

4. To display the gallery-selected flight details on the Power Apps repeating table, add a gallery control and the formula below to its Items property.

Items = Filter('Flight Details',TravelID=Gal_TravelRequests.Selected.TravelID)

This formula filters the flight details of the selected item in the gallery.

Also, add the controls below within the Power Apps gallery. [You can also use Text labels instead of these controls].

• Three Text input controls = For S.No, Flight From, Flight To.
• DatePicker = For Flight Date.
• Dropdown = For Flight Ticket Type.

Provide the formulas below in the Default property of each control within the gallery to display data.

S.No = ThisItem.'S.NO'
Flight From =ThisItem.'Flight From'
Flight To = ThisItem.'Flight To'
Flight Date = ThisItem.'Flight Date' [Provide formula to DefaultDate property of date picker]
Flight Ticket Type = ThisItem.'Flight Ticket Type'.Value 
[Provide the Choices([@'Flight Details'].'Flight Ticket Type') to the dropdown Items property]

5. To fetch family details of the gallery-selected item, add another gallery control and provide the below formula in its Items property.

Filter('Family Details',TravelID=Gal_TravelRequests.Selected.TravelID)

The above formula filters the family details of the gallery-selected item.

Also, add four text input controls within the gallery control and provide the formulas below for its Default property.

S.NO  = ThisItem.'S.NO'
Full Name = ThisItem.'Full Name'
Family Relation = ThisItem.FamilyRelation
Age = ThisItem.Age

Now, save the changes and preview the app once. The details of the gallery-selected item will appear in the Power Apps form and repeating table controls.

Update PowerApps Repeating Table Data [Individual Items] to SharePoint List

Let’s see how to update the Power Apps repeating table items into a SharePoint list. In the example below, you can see that I can update the items in the repeating table.

Follow the steps below to achieve this!

1. In the “TravelRequest_Screen_View” screen on the flight details repeating table [ gallery], add an Edit icon and provide the formula below in its OnSelect property.

UpdateContext({varEditMode: !varEditMode});
Set(selectedItemID, ThisItem.ID)

The UpdateContext and Set functions are used to create variables.

• varEditMode = toggled variable.
• selectedItemID = Contains current item id.

2. Provide the formulas below for each control DisplayMode property in the gallery control.

If(selectedItemID = ThisItem.ID && varEditMode, DisplayMode.Edit, DisplayMode.View)

4. Now, add a button control, name it “Update,” and provide the formula below in its OnSelect property.

Patch(
    'Flight Details',
    LookUp(
        'Flight Details',ID= selectedItemID
    ),
    {
        'Flight From': txt_Flight_From.Text,
        'Flight To': txt_Flight_To.Text,
        'Flight Date': dtp_Flight_Date.SelectedDate,
        'Flight Ticket Type': {Value: drp_TicketType.Selected.Value}
    }
)

5. Save the changes and preview the app once. Then, try to edit an item and update it once. Then, in the SharePoint list, check it once, and it will update.

I hope you understand retrieving & updating SharePoint list details on the Power Apps repeating tables. This approach can be used when you have multiple SharePoint lists connected with a common field and want to display those fields’ data in Power Apps.

Also, you may like:

• How to create Power Apps repeating table with a new form
• Power Apps Print Function
• send approval emails using the Power Apps button
• Reset checkboxes in Power Apps gallery control
• Power Apps create table

To capitalize the first letter in TypeScript, you can use the charAt() and toUpperCase() methods. First, retrieve the first character of the string using charAt(0), convert it to uppercase with toUpperCase(), and then concatenate it with the rest of the string using slice(1). For example:

function capitalizeFirstLetter(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

This function ensures that the initial character is capitalized while leaving the rest of the string unchanged.

Typescript Capitalize First Letter

There are various methods for making the first letter of a string in Typescript uppercase. Let me explain each method with examples.

Basic Syntax for Uppercase First Letter in Typescript

In TypeScript, capitalizing the first letter of a string involves a few simple steps: extracting the first character, converting it to uppercase, and then concatenating it with the rest of the string. Here’s a basic example:

function capitalizeFirstLetter(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

Also, check out Split String by Length in Typescript

Method 1: Using charAt() and toUpperCase()

In Typescript, you can use the charAt() and toUpperCase() methods to convert first letter uppercase in a string.

The charAt() method returns the character at a specified index, while toUpperCase() converts a string to uppercase in Typescript. This method is easy to understand and use.

Let me show you an example.

Example

function capitalizeFirstLetter(name: string): string {
    return name.charAt(0).toUpperCase() + name.slice(1);
}

console.log(capitalizeFirstLetter("new york")); // Output: New york
console.log(capitalizeFirstLetter("canada")); // Output: Canada

In this example, charAt(0) retrieves the first character of the string, and toUpperCase() converts it to uppercase. The slice(1) method then extracts the rest of the string from the second character onward, which is concatenated back to the uppercase first letter.

I executed the above code using VS code; it returns the exact output. Below is the screenshot for your reference.

Read Convert String to Enum in Typescript

Method 2: Using Template Literals

Template literals provide a more modern way to handle string interpolation in TypeScript. This method can be used to capitalize the first letter in a string in Typescript.

Example

Here is an example.

function capitalizeFirstLetter(name: string): string {
    return `${name.charAt(0).toUpperCase()}${name.slice(1)}`;
}

console.log(capitalizeFirstLetter("andrew")); // Output: Andrew
console.log(capitalizeFirstLetter("jessica")); // Output: Jessica

Using template literals, we achieve the same result with a more concise and readable syntax. This method is especially useful when dealing with more complex string manipulations.

Once you execute the above Typescript code, you can see the exact output in the screenshot below:

Check out Split String By New Line in Typescript

Method 3: Using substring() and toUpperCase()

The substring() method can also be used to make first letter uppercase in Typescript. It extracts parts of a string and returns the new substring. This method is similar to slice() but offers a slightly different syntax.

Example

Let me show you an example to help you understand better.

function capitalizeFirstLetter(city: string): string {
    return city.substring(0, 1).toUpperCase() + city.substring(1);
}

console.log(capitalizeFirstLetter("chicago")); // Output: Chicago
console.log(capitalizeFirstLetter("miami")); // Output: Miami

In this example, substring(0, 1) extracts the first character, and substring(1) extracts the rest of the string from the second character onward. This method is functionally equivalent to using slice().

Here is the output in the screenshot below:

Read Convert String to Date in TypeScript

Method 4: Using Regular Expressions

Regular expressions offer a powerful way to perform complex string manipulations in Typescript. This method is slightly more advanced but very efficient, especially for more complex string transformations.

Let me show you how we can use regular expressions to capitalize first letter in Typescript.

Example

Here is an example.

function capitalizeFirstLetter(state: string): string {
    return state.replace(/^\w/, (c) => c.toUpperCase());
}

console.log(capitalizeFirstLetter("california")); // Output: California
console.log(capitalizeFirstLetter("texas")); // Output: Texas

In this example, the regular expression /^\w/ matches the first word character in the string. The replace() method then replaces this character with its uppercase equivalent using a callback function. This method is particularly useful when performing more complex or bulk string transformations.

I executed the above code, and you can see the exact output in the screenshot below:

Read Convert String to Number in TypeScript

Method 5: Using TypeScript’s Capitalize Utility Type

TypeScript provides a built-in utility type called Capitalize that can capitalize the first letter of string literal types. However, it’s important to note that this works at the type level and not at runtime.

Example

Here is an example.

type CapitalizedName = Capitalize<"john">; // Type is "John"
type CapitalizedCity = Capitalize<"boston">; // Type is "Boston"

The Capitalize utility type is useful for ensuring that string literals are correctly capitalized at the type level. This can be particularly beneficial in type-safe applications where you want to enforce specific string formats.

Conclusion

In this tutorial, I explained several methods to capitalize the first letter of a string in TypeScript, such as charAt() and toUpperCase(), template literals, regular expressions, etc.

I executed all the examples using VS code, and I hope all the code works for you, too. Do let me know in the comments if you face any issues.

You may also like:

• Split String And Get Last Element In Typescript
• Split String by Regex in TypeScript