Archive

Posts Tagged ‘Canvas Apps’

[Step by Step] Power Apps | Show pop ups in Canvas App

November 15, 2022 Leave a comment

In this article lets see how to show pop-ups in Canvas Apps using Container controls. I am going to explain this topic with two different examples. A ‘Single Popup’ and ‘Dual Popup’.

Single Popup in action:

Dual Popups in action:

Now that you got an idea of the two examples, lets go ahead and learn how to build them.

Step by Step to show single popup:

  • Create a new Canvas App.
  • Add a button ‘Demo Single Popup’ to the screen to show popup.
  • To display a popup, we would need 2 Container controls.
    • First container will bring the gray out affect speeded across the screen.
    • Second container will hold the display content and acts as popup pane.
  • So add the 1st Container on the screen and spread it across the screen.
    • I’ve named the Container as ‘cont_One’.
  • In the “Fill” property of Container (i.e., cont_One), set the value as RGBA(169, 169, 169, .75)
    • RGBA(169, 169, 169, .75) gives gray out affect. You may also use your own color combination.
  • Now add the 2nd Container, by selecting the 1st Container (i.e., cont_One). Make sure you select ‘cont_One’ before adding the second container.
    • I’ve named the2nd Container as ‘cont_Two’.
  • Place the 2nd Container (i.e., cont_Two) middle of the screen and set the background color.
  • Its time to add pop up content. So, select ‘cont_Two’ and add the controls. I’ve added a Label and Button controls as shown below.
  • Now that we got the layout ready, its time to implement hide/show of popup logic.
  • As we need to show popup only on ‘Demo Single Popup’ button click, set a Boolean variable by name ‘ShowPopup‘ on ‘OnSelect’ of ‘Demo Single Popup’ button.
    • Formula : UpdateContext({ShowPopup : true});
  • Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable which we defined in the previous step.
  • As the popup should be closed on click of ‘Close’ button on 2nd Container (i.e., cont_Two), select the ‘Close’ button and on ‘OnSelect’ event, set the ShowPopup to ‘false’.
    • Formula : UpdateContext({ShowPopup: false});
  • That’s it. Play the App and you should see popup on click of ‘Demo Single Popup’ button and should close on click of ‘Close’ button.

Step by Step to show dual popup:

In the dual popup scenario, everything remains same as we did for single popup and additionally we will add a 3rd Container. Lets get started.

  • Repeat the steps you did during single popup.
    • There is a slight change than what we did in single popup demo in terms of controls.
    • I’ve added ‘Rating’ control instead of label.
  • Now that we added ‘cont_One’ and ‘cont_Two’, to get the dual popup, select ‘cont_One’ and add a new Container and name it as ‘cont_Three’
  • Place the ‘cont_Three’ on top of ‘cont_Two’ and add controls as shown below.
  • We got the layout ready, its time to implement hide/show of popup logic as below.
    • On click of ‘Demo Dual Popup’ button on main screen
      • Show ‘cont_One’.
      • Show ‘cont_Two’
      • Hide ‘cont_Three’.
    • On click of ‘Rate Us’ button of ‘cont_Two’
      • Show ‘cont_One’.
      • Hide ‘cont_Two’.
      • Show ‘cont_Three’.
    • On click of ‘Close’ button of ‘cont_Three’
      • Hide ‘cont_One’.
      • Hide ‘cont_Two’.
      • Hide ‘cont_Three’.
  • Don’t worry, if the above conditions scares you. Its easy to implement. Its how we did by defining ‘ShowPopup‘ variable in showing single popup example. Additionally we would need another variable ‘ShowDualPopup‘ for dual popup.
  • On ‘OnSelect’ event of ‘Demo Dual Popup’ button, set ‘ShowPopup‘ variable as ‘true’ and another variable ‘ShowDualPopup‘ as ‘false’.
    • Formula : UpdateContext({ShowPopup : true, ShowDualPopup:false});
  • Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable. (Refer screen from single popup example if you need help).
  • Now select 3rd Container (i.e., cont_Three) and set ‘Visible’ as ‘ShowDualPopup‘ variable.
  • As we need to show ‘cont_Three’ only on click of ‘Rate us’ button of ‘cont_Two’, on ‘OnSelect’ of ‘Rate us’ button set the ‘ShowDualPopup‘ variable to ‘true’.
    • Formula : UpdateContext({ShowDualPopup : true});
  • Important point to note is that, we dont need logic to Hide/Show ‘cont_Two’ as it gets visible when ‘cont_One’ is visible and it gets hidden when ‘cont_Three’ is visible as ‘cont_Three’ is top of ‘cont_Two’.
  • Finally, as we need to hide all the popups (i.e., cont_One and cont_Three) once you click the ‘Close’ button on ‘cont_Three’, on ‘OnSelect’ of ‘Close’ button set both ShowPopup and ShowDualPopup variables to ‘false’.
    • Formula : UpdateContext({ShowPopup:false,ShowDualPopup :false})
  • That’s all needed for dual popups. Play the App and you should see dual popups.

ūüôā

Power Platform | Power Apps | Creator Kit (Preview)

If you are a beginner or expert in Power Apps Canvas Apps, building a consistent and intuitive user experience is always challenging, as there were no standard guidelines.

Using the Creator Kit (Preview) from Microsoft Power CAT team, now you can seamlessly create consistent and effective user experiences using pre-built controls and components built on the Fluent UI framework.

In this blog post, lets see how to install and use the ‘Creator Kit’.

Prerequisites:

To use ‘Creator Kit’, following Prerequisites must be fulfilled.

  • A¬†Power Platform environment with Dataverse database¬†
  • Power Apps component framework feature enabled¬†(Refer next section on steps to enable).
    • Feature has to be enabled before you import ‘Creator Kit’ solution.
  • System Customizer security role is needed to use the Creator Kit components.
  • A Premium Power Apps license is required to develop and use apps with custom components.

Enable Power Apps component framework feature:

  • Code components contain code that may not be generated by Microsoft and can potentially access security tokens and data when rendered in Power Apps Studio.
  • Hence to add code components to your app, you need to enable the Power Apps component framework feature in each environment.
  • By default, the Power Apps component feature is enabled for model-driven apps but not for Canvas Apps.
  • To enable sign in to¬†Power Apps with ‘System Administrator’ role.
  • Select¬†Settings¬†Settings., and then select¬†Admin Center.
  • Go to the Environment, and click on ‘Settings’
  • From ‘Settings’ screen, navigate to ‘Product -> Features’.
  • Turn on¬†Power Apps component framework for canvas apps, and then select¬†Save.

Assuming all prerequisites are configured, lets proceed with ‘Creator Kit’ installation and usage.

Install ‘Creator Kit’:

  • ‘Creator Kit’ comes as a ‘Managed’ solution and download the solution from here.
  • Connect to Power Apps maker portal and pick the Environment where you want to install the ‘Creator Kit’.
  • Import the solution.

‘Creator Kit’ Components:

Once you imported the ‘Creator Kit’ solution, open the Solution and you would find following components.

Now that we know how to install and the components of ‘Creator Kit’, lets dive in to the details of each component.

Creator Kit Reference App:

  • This canvas app helps as a guide and allows you to learn about each component, recommended best practices for optimal user experience and see the implementation code (Select the¬†Code¬†tab to see the Power Fx formulas used).

Canvas Template App:

‘Canvas Template’ App contain all the reusable components of ‘Creator Kit’. To use the ‘Creator Kit’ components in your own Canvas App, follow the steps.

  • Create a new Solution. I’ve named my solution as ‘Use Creator Kit‘.
  • Open the Solution and add the ‘Canvas Template‘ app which is part of ‘Creator Kit’ managed solution, by using Add existing¬†>¬†Apps¬†>¬†Canvas¬†action in the ribbon.
  • Now open the ‘Canvas Template‘ app by using ‘Edit’ option.
  • You will get following warning popup because the app contain custom code components. Continue by clicking ‘Open app’.
  • Now, create a copy of the app by select¬†File¬†>¬†Save As¬†and enter a new name for the copy. I named my app as ‘Canvas App from Template‘.
  • Click ‘Save’ and the copy will appear in the same solution (i.e., ‘Use Creator Kit’ in my case).
  • Now we have our own App (i.e., Canvas App from Template) to start with, remove the original ‘Canvas Template‘ app from the solution to avoid confusion.
  • Open our ‘Canvas App from Template‘ app and you would find 2 screens (Template Screen and Controls Screen).
  • ‘Controls Screen’ contain all the code components of ‘Creator Kit’ for our development reference. We can select any of the controls and understand the properties which helps while building our screens.
  • ‘Template Screen’ contain placeholders to head start your development.
  • You can customize ‘Template Screen’ as per your requirement and can also add ‘Code Components/Library Components’ installed from ‘Creator Kit’ as needed.

Fluent Theme Designer App:

Use this app to generate a Theme JSON object for styling components consistently. To generate follow below steps.

  • Either open the ‘Creator Kit’ solution which you downloaded and imported or go to ‘Apps’ from maker portal and select the ‘Fluent Theme Designer App’ and ‘Play’.
  • Choose the Primary color, Text color, and Background color values as per your need.
  • Select¬†Export theme¬†from the top-right corner to generate the Power Fx expression version of the Theme JSON, then copy the value from the panel.
  • Save the Theme JSON as a global variable in the¬†OnStart¬†property of your app, with the ‘palette’ code block as a property of the¬†AppTheme¬†object variable.
Set( AppTheme, {
  palette: {
    themePrimary: "#0078d4",
    themeLighterAlt: "#eff6fc",
    themeLighter: "#deecf9",
    themeLight: "#c7e0f4",
    themeTertiary: "#71afe5",
    themeSecondary: "#2b88d8",
    themeDarkAlt: "#106ebe",
    themeDark: "#005a9e",
    themeDarker: "#004578",
    neutralLighterAlt: "#faf9f8",
    neutralLighter: "#f3f2f1",
    neutralLight: "#edebe9",
    neutralQuaternaryAlt: "#e1dfdd",
    neutralQuaternary: "#d0d0d0",
    neutralTertiaryAlt: "#c8c6c4",
    neutralTertiary: "#a19f9d",
    neutralSecondary: "#605e5c",
    neutralPrimaryAlt: "#3b3a39",
    neutralPrimary: "#323130",
    neutralDark: "#201f1e",
    black: "#000000",
    white: "#ffffff"
  }
});

Canvas components:

Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app, or across apps using a component library.

In ‘Creator Kit’ components are defined in the component library called¬†Power CAT Component Library.

Code Components:

App makers can use Power Apps component framework (PCF) to create code components that can be used in their canvas apps.

  • In ‘Creator Kit’, ‘Code Components’ are defined as individual custom controls in the solution.

Hope you got some knowledge on the usage of ‘Creator Kit’ and I highly recommend to explore this.

The best part is its an open source project and you can view the code in the latest version of the ‘Creator Kit’ in the¬†GitHub repository

ūüôā

Categories: PowerApps Tags: , ,

Power Apps | Unable to query Canvas App using CDS WebAPI

September 27, 2020 Leave a comment

In my Power Apps Environment I have the following ‘Hello World’ Canvas App.

When I query ‘Canvas App’ entity using Web API from same Environment, there were no Canvas App records returned.

Reason:

  • If you create a Canvas App from ‘Apps’ tab outside of solutions or imported any App to the Environment, Canvas App will not be available in CDS until its added to a solution.
  • Open any of the unmanaged solution from the Environment, use ‘Add Existing’ and select the ‘Hello World’ Canvas App from ‘Outside solutions’ tab.
  • Once added a ‘Name’ gets populated and looks as below.
  • Now query the ‘Canvas App’ entity using Web API and now we should get the ‘Hello World’ Canvas App record.

ūüôā

Categories: PowerApps Tags: ,