create-a-power-apps-radio-button-1

Create a Power Apps Radio button. Part 1

Power Apps TutorialsTutorials

In this Power Apps tutorial, we will continue discuss what is Power Apps Radio button Control and its all-important properties. A Radio button Control is an input control that shows multiple options, of which users can select only one at a time. A Radio Control, a standard HTML input control, is best used with only a few, mutually exclusive options.

Table of contents

  1. Explore Radio button properties.
  2. Radio button add items.
  3. Radio button SharePoint list.
  4. Radio button in the gallery.
  5. Radio button default value.
  6. Radio button horizontal.
  7. Radio button selected value (Scenario-1).

Key properties Radio button Control

  1. Default – The value of a control before the user changes it.
  2. Items – The source of data that appears in a control such as a gallery, a list, or a chart.
  3. Layout – Whether the options are laid out vertically or horizontally.
  4. Value – The value of an input control.
  5. Selected – The data record that represents the selected item.
  6. Align – The location of text in relation to the horizontal center of its control.
  7. Color – The color of text in a control.
  8. DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
  9. OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).
  10. OnSelect – Actions to perform when the user taps or clicks a control.
  11. RadioSize – The diameter of the circles in a radio-button control.
  12. Reset – Whether a control reverts to its default value.

Formulas in this tutorial

Microsoft Power Apps documentation: Radio control in Power Apps

create-and-update-a-collection-in-a-canvas-app

Create and update a collection in a Canvas App

Power Apps TutorialsTutorials

In this Power Apps tutorial, we will discuss how you can use a collection to store data that users can manage in your app. A collection is a group of items that are similar, such as products in a product list.

How to create and update a collection in a Canvas App

  1. Create an app or open an existing app in Power Apps.
  2. Create a multicolumn collection.
  3. Show the collection that you created.
  4. Remove one or all items.
  5. Run an app.

Formulas in this tutorial

Microsoft Power Apps documentation: Create and update a collection in a canvas app

create-a-navigation-menu-using-the-gallery-control

Create a navigation menu using the Gallery Control

Power Apps TutorialsTutorials

Gallery control in Power Apps is a control that contains other controls and shows a set of data. A Gallery control can show multiple records from a data source, and each record can contain multiple types of data. For example, you can use a Gallery control to show multiple contacts with each item showing contact information that includes a name, an address, and a phone number for each contact. Each data field appears in a separate control within the Gallery control. And you can configure those controls in its template. In this tutorial we will see how to create a navigation menu using the Gallery control.

How to create a navigation menu using the Gallery Control

  1. Add Vertical Gallery.
  2. Connect Data and Edit layout.
  3. Set the Size of the Gallery control item.
  4. Change the Fill color of the Gallery control and color of the Screen.
  5. Add a Rectangle and a Text label.
  6. Change the Size and Color of the Text label.
  7. Duplicate and rename the Screen.
  8. Add a Text label control in the Gallery control.
  9. Change the Text label control Text property.
  10. In the Gallery control change on the “OnSelect” property.
  11. Run an app.

Key properties of Gallery control

  1. Default – The item or record from the data source to be selected in the gallery when the app starts up.
  2. Items – The source of data that appears in a control such as a gallery, a list, or a chart.
  3. Selected – The selected item.
  4. DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
  5. Fill – The background color of a control.
  6. Height – The distance between a control’s top and bottom edges.
  7. Visible – Whether a control appears or is hidden.
  8. Width – The distance between a control’s left and right edges.

Formulas in this tutorial

Microsoft Power Apps documentation: Gallery control in Power Apps

add-timer-control-to-the-power-apps

Add Timer control to the Power Apps

Power Apps TutorialsTutorials

Time control is a control that can determine how your app responds after a certain amount of time passes. Timers can, for example, determine how long a control appears or change other properties of a control after a certain amount of time has passed. In this tutorial we will see how to add a Timer control in Power Apps.

How to add Timer control to the Power Apps

  1. Add Timer control.
  2. Add Text Label control.
  3. Add the rule to Text Label control.
  4. Set the duration time for the Duration property.
  5. Set the value true for the Autostart property.
  6. Set the rule for the OnTimeEnd property.
  7. Set the Visible property.
  8. Run an app.

Key properties of Time control

  1. Duration – How long a timer runs in milliseconds. The maximum is 24 hours expressed in milliseconds. Default is 60 seconds.
  2. OnTimerEnd – Actions to perform when a timer finishes running.
  3. Repeat – Whether a timer automatically restarts when it finishes running.
  4. AutoPause – Whether the timer control automatically pauses if the user navigates to a different screen.
  5. AutoStart – Whether the timer control automatically starts to play when the user navigates to the screen that contains that control.
  6. OnTimerStart – Actions to perform when a timer starts to run.
  7. Start – Whether the timer starts.
  8. Visible – Whether a control appears or is hidden.

Formulas in this tutorial

Microsoft Power Apps documentation: Timer control in Power Apps

Create an App from SharePoint Online List

Create an App from SharePoint Online List

Power Apps TutorialsTutorials

In this tutorial, we’ll use Power Apps to create a canvas app based on items in a list created using Microsoft Lists. You can create the app from within Power Apps or SharePoint Online. From within Power Apps, you can create the app based on a list in an on-premises SharePoint site if you connect to it through a data gateway.

How to create a canvas app from a list

  1. Add Clear and Submit buttons.
  2. Add an Edit form.
  3. Connect to data.
  4. Add fields.
  5. Add formulas to buttons.
  6. Run an app.

Formulas in this tutorial

Microsoft Power Apps documentation: Create a canvas app with data from Microsoft Lists

create-an-app-from-power-apps-template

Create an App from Power Apps template

Power Apps TutorialsTutorials

Microsoft Power Apps makes it possible for anyone to build robust, no-code mobile business apps using data from a variety of sources, including OneDrive, Excel, and SharePoint. Today we will look at how you can quickly create an application using ready-made Power Apps templates.

For our example, we’ll use the Budget Tracker App template. Using this application as an example, we will learn how can control the budget for planned events and projects. The convenience of using the template is that, without writing a single line of code, you can create your own application using ready-made features.

How to create an App from Power Apps template

  1. Create a MS Power Apps App
  2. Choose Budget Tracker App to Create MS Power Apps
  3. Designing Power Apps App using Budget Tracker App Power Apps template
  4. Change Theme of Power Apps App or form
  5. Change / add background image in Power Apps App
  6. Run the Power Apps App​
  7. Save MS Power Apps form or App
  8. Conclusion

1. Create a Microsoft Power Apps App

First, we will create a MS Power Apps application. To create a new Power Apps app, open https://make.powerapps.com. Then log in with your username and password. From the left side of the panel, click on Apps -> New App to create a new Power Apps application.

1-1

Choose the Canvas. Now choose the layout that suits you best. It can be a layout for a phone or tablet.

2

2. Choose Budget Tracker App to Create MS Power Apps

Microsoft provides lots of Power Apps templates like Onboarding Tasks, Service Desk, Leave Request, Interview Tool, Employee Engagement Survey, Health Plan Selector, etc. Click on the Budget Tracker from the Templates.

3

You can click on the Preview button and see the functionality of the application. To proceed to editing the application, click on the Create button.

4

3. Designing Power Apps App using Budget Tracker App Power Apps template

If you log in to the app for the first time, you will see a welcome screen. Click Skip.

5

Left pane shows a hierarchical view of all the controls on each screen or a thumbnail for each screen in your app. We can see all the working screens such as BudgetScreen, NewBudgetScreen, addexpensscreen, Reciptscreen, DeleteReceipt, DeleteExpense and DeleteBudget.

6

The screens represent our data. Each control that we will use in the application can be found in the left side panel. For example, the Delete Receipt screen uses a text field, so we can find and highlight it.

7

Middle pane shows the canvas app that you’re working on. On this pane we see all the elements of the application as the user will see them. We can view the running application by clicking on the F5 button or the Preview the app button on the upper panel on the right. It’s just a page representing the user interface. When you make changes, all of them will be displayed in this area of the screen.

8-1

Right pane is where you set options such as the layout, properties, and data sources for certain controls. On the right pane, you can directly change the design of your pages. You can select any page you want to change and change the data representation. Here you can also change the page properties, as well as enable rules.

9

4. Change Theme of Power Apps App

Here we will see how to change the theme of Power Apps App.

10

To change the Theme go to the Home page, Click on Theme. In the Theme, we can able to see all the Theme collection. Choose any one of it.

11

5. Change / Add Background Image in Power Apps App

We can add the background image to our “Power Apps” app. To add the Image Open the home screen and choose Properties and upload the image in the Background image. Here I have browsed the image from the local system. Now our background image will automatically be changed.

Create an App from Power Apps template-13

6. Run the Power Apps App

An app from a template opens in Power Apps Studio, where you’ll spend most of your time customizing. Before you make any changes to the app, explore how the app works in Preview mode.

Press F5 to open the app in Preview mode. Alternatively, you can also select the play button on the top-right corner of the screen. The app is populated with sample data to demonstrate the functionality of the app.

Create an App from Power Apps template-14

Explore the app’s default behavior by creating, updating, and deleting sample data, and then verify that the data in your cloud-storage account reflects your changes.

Return to the default workspace by pressing Esc (or by selecting X icon near the upper-right corner).

Create an App from Power Apps template-15

7. Save MS Power Apps form or App

Press Ctrl-S, give your app a name, and then select Save to save your app to the cloud.

Create an App from Power Apps template-16

8. Conclusion

What are the benefits of creating an app using templates?

There are many ways to create an app, from your data or from scratch. However, using templates gives you some advantages:

  1. Pre-built layouts and color schemes for different app screens that you can directly use or clone.
  2. Learn how controls are being configured for common actions, such as how to submit data from a form by clicking on a button, how to transition from one app screen to the other, how to show a list of items from my data, etc.
  3. Learn how data flows in and out of your app and how to wire up your data source to your app.
  4. Learn how camera or GPS are being integrated into your app.

Microsoft Power Apps documentation: Create a canvas app from a template