Archive

Posts Tagged ‘Power Apps’

Power apps – Model driven app – Excel import not working

Other day, when we copied one of the Environments to another and tried to import csv file using ‘Excel’ import feature, file stuck at ‘Submitted’ state.

Reason:

  • Post copy, Environment’s ‘Administration mode’ gets enabled by default, which prevents all background (Async) operations.

Fix:

  • Turn off the ‘Administration mode’

🙂

Power Apps – Component library

Components

In Power Apps, Components are reusable building blocks for canvas apps so that app makers can create custom controls to use inside an app.

  • Components scope is local, which means you can create a Component in an App and can reuse with in the screens of that particular App.
Adding ‘Component’ from ‘Canvas’ App.

Component Library

Component Libraries (Currently in preview) are the recommended way to reuse components across apps.

Unlike the ‘Component’ whose scope is limited with in the App, ‘Component Libraries’ can be reused across the Apps.

In this article, we are going to learn following topics

  • Create a new ‘Component Library’ with ‘Header’ and ‘Footer’ components.
  • Share the ‘Component Library’
  • Use the ‘Component Library’ in Canvas App
  • Modify the ‘Component Library’
  • Update ‘Component Library’ in Canvas App.

Lets get started with Prerequisites.

Prerequisites:

  • PowerApps account. Refer here to get an account.

Once you fulfill the Prerequisites, lets get started with first step.

Create a new ‘Component Library’ with ‘Header’ and ‘Footer’ components:

  • Connect to Power Apps maker portal
  • From the ‘Apps’ tab, click on ‘New component library’.
  • Provide the name and click on ‘Create’.
  • As we know ‘Component Library’ is collection of reusable ‘Components’, In the next screen, a default ‘Component’ would be presented.
  • Rename the default Component to ‘Header’.
  • Add a Label control ‘lblHeaderText’, as shown in the screen.
  • Add a new ‘Custom property’ of type ‘Text’ and name it as ‘Header Text’.
    • A component can receive input values and emit data if you create one or more custom properties.
  • Set the Label controls ‘Text’ property to the ‘Header Text’ property.
    • ‘Header Text’ property will be handy while referring the components in ‘Canvas’ apps.
  • Also set the ‘Header’ components ‘Width’ property to the ‘App.ActiveScreen.Width’.
    • App.ActiveScreen.Width sets the width of Components as per the Canvas app.
  • Lets copy the ‘Header’ component using the ‘Duplicate component’ option, and create ‘Footer’ component.
  • I’ve added a Label and new ‘Custom property’ of type ‘Text’ and name it as ‘Footer Text’, as shown in screen below.
  • Save the ‘Component Library’.
  • In the maker portal ‘Component Library’ would show up.

Share the ‘Component Library’:

Now that we created the ‘Component Library’, we need to share the App.

  • Post the ‘Save’, click on ‘Share’.
  • Add people you would like to share. I’ve shared the Component Library with ‘Everyone’ in my account.

Use the ‘Component Library’ in Canvas App:

As we created the ‘Component Library’ lets put that in use by creating a Canvas app.

  • Create a new Canvas app.
  • To add the ‘Component Library’, click on ‘+ Insert’ and ‘Get more components’.
  • From the list choose the ‘Components’.
    • You would get the ‘Components’ those were shared to you.
  • Added ‘Components’ would be available under ‘Library Components’.
  • Add both ‘Header’ and ‘Footer’ Components to the Canvas app’s screen.
  • Set the ‘HeaderText’ property of the ‘Header’ component. This would immediately changes your Header label text.
  • Similarly, Set the ‘FooterText’ property of the ‘Footer’ component. This would immediately changes your Footer label text.

Modify the ‘Component Library’:

Lets modify the ‘Component Library’ and see how it reflects in the Canvas App.

  • Change the background color of the ‘Header’ component.
  • Save and Publish.
  • Go to ‘Canvas App’ and you would notice banner as below.
  • Click on ‘Review’ and click on ‘Update’ to get the latest Component updates.
  • Canvas apps Header changes as below.

Notes:

  • Sharing a component library works the same way you share a canvas app.
  • When you share a component library, you allow others to reuse the component library.
  • Once shared, others can edit the component library and import components from this shared component library for creating and editing apps.
  • If shared as a co-owner, a user can use, edit, and share a component library but not delete or change the owner.
  • You can’t add existing component libraries to a solution. However, you can create new component libraries for solutions using add component library flow.
  • You can’t access controls in the component from outside of the component.
  • You can’t refer to anything outside of the component from inside the component. The exception is data sources shared between an app and its components

🙂

Power Apps Portal – Multi Language – ‘Invalid website language’ error

February 1, 2020 Leave a comment

Other day, while configuring multi language on Power Apps portal, I was getting following error while adding ‘Hindi’ as new ‘Website Language’.

Portal_Lng2

Reason:

  • ‘Hindi’ language was disabled by default in CDS.Portal_Lng5

Fix:

  • From your portal’s ‘Model Driven’ App, go to ‘Advance Settings’, which opens up classic ‘Settings’ sitemap area.

Portal_Lng4

  • Under ‘Settings -> Administration -> Languages‘ select the Language which you want to enable and click ‘Apply’.

Portal_Lng6

  • Now go to the portal’s ‘Model Driven’ App and you should be able to create new ‘Website Language’ with enabled ‘Language’ (i.e., Hindi).

Portal_Lng7

How Multiple Language works in ‘Power Apps Portal’:

  • To enable a new localization (i.e., Language), add a new ‘Localized Content’ record, to every Portal ‘Web Page’.

Portal_Lng8

  • ‘Localized Content’ record will have a ‘Portal Language’ lookup of ‘Website Language’ record.
  • To add ‘Hindi’ localization to the ‘Web Page’ add a new ‘Localization Content’ record with ‘Portal Language’ lookup set to ‘Hindi’ website language (Refer ‘Fix’ section for how part).

Portal_Lng9

  • Make sure ‘Published State’ of ‘Localized Content’ is ‘Published’.

Key Notes:

  • By default a ‘Localization Content’ record pointing to base language (i.e., English in my case) gets created when you create a new ‘Web Page’.
  • Web Link Sets:
    • When a new language is activated , a new set of links are created for the newly activated language.

Portal_Lng11

  • Content Snippets:
    • When a new language is activated , a new set of Snippets are created for the newly activated language.
    • Refer link on usage of ‘Content Snippets’

Portal_Lng10

  • If you activate a new language after enabling Portal, the metadata will not be installed automatically for the newly activated language.
  • To get the metadata translation for the newly activated language, you must import the metadata translation from the Power Apps Portals admin center.

🙂

 

Power Apps – Understanding ‘Variables’

January 26, 2020 1 comment

If you are a ‘Power Apps’ beginner and wonder how to declare and use variables like the way you do in any of your favorite programming language (C#, Java, PHP, etc..) this article is for you.

Before we jump in to ‘Power Apps’ Variables, lets first understand following things:

  • ‘Power Apps’ is different and works more like Excel.
  • Power Apps and Excel both automatically recalculate formulas as the input data changes, without the need of Variables.
  • In below screen,
    • Sum of A and B is being calculated and set to the Label just by summing up the Text values directly like a formula.
    • If either A or B value changes, Label will recalculate the value.

PA_Var1

Why we need variables in ‘Power Apps’?

  • In general, its recommended to avoid using variables in Power Apps.
  • But sometimes only a variable can enable the experience you want.
  • To understand this, lets tweak the previous screen by adding a Button and Sum up the values on button click.

PA_Var2

  • Here we can’t use formulas (i.e., Like screen 1) to calculate the Sum because its value depends on button Click.
  • We require a variable to hold the Sum before its set to the Variable to display.

Types of Variables:

Power Apps has three types of variables:

PA_Var3

Global Variable:

  • You set the value of the global variable with the Set function.
    • Set( Var_Name, 0 ) sets the global variable to a value of 0.
  • Global variables can hold any value, including strings, numbers, records, and tables
  • In my example, on ‘OnSelect’ of ‘Calculate’ button, using ‘Set’ function, I am setting Sum of txt1.Text and txt2.Text to a Global variable ‘globalVar‘.

PA_Var5

  • And setting the ‘Text’ of ‘Label’ to Global variable ‘globalVar‘.

PA_Var6

  •  Global variable scope is ‘App’ level, can be references from anywhere in the app. Which means, I can read the ‘globalVar‘ from a different screen (i.e., Screen2).

PA_Var7

Context Variable:

You implicitly establish and set context variables by using the UpdateContext or Navigate function.

UpdateContext:

  • UpdateContext( { Var_Name: 0} ) sets the context variable to a value of 0.
  • Context variables can hold any value, including strings, numbers, records, and tables
  • In my example, on ‘OnSelect’ of ‘Calculate’ button, using ‘UpdateContext’ function, I am setting Sum of txt1.Text and txt2.Text to Context variable ‘ctxVar‘.

PA_Var8

  • And setting the ‘Text’ of ‘Label’ to Context variable ‘ctxVar‘.

PA_Var9

  • ‘OnSelect’ of ‘Clear Context Variable’ button, I am setting ‘ctxVar‘ to 0.

PA_Var10

  • Context variable set using ‘UpdateContext’ function’s scope is ‘Screen’ level, can only be references with in the screen.

Navigate:

  • You can also set a context variable when you use the Navigate function to show a screen.
  • In the example below, lets add a new button ‘Navigate to Screen2’ and on ‘OnSelect’, navigate to ‘Screen2’ by passing ‘ctxvar‘ as argument.
    • Navigate(Screen2,ScreenTransition.Fade,{ctxvar:txt1.Text+txt2.Text})

PA_Var11

  • On ‘Screen2’ set the Label’s text to ‘ctxvar’.

PA_Var12

  • Run the application, click on ‘Navigate to Screen2’

PA_Var13

  • On the ‘Screen2’ we get ‘ctxvar’ value displayed in label.

PA_Var14

  • Important thing to notice is, Except for Navigate, context variables are limited to the context of a single screen, which is where they get their name. You can’t use or set them outside of this context.

Use Collection:

  • Collection holds a table that is easy to modify.
  • Create and set collections by using the ClearCollect function.
    • You can use the Collect function instead, but it will effectively require another variable instead of replacing the old one.
  • In my example, on ‘OnSelect’ of ‘Add to Collection’ button, collect the ‘txt1.Text’ values to a collection ‘collSum‘ using Collect(collSum,txt1.Text)

PA_Var15

  • We clear the Collection ‘collSum‘ using Clear(collSum) function.

PA_Var16

  • To display the ‘collSum’ values, add a ‘DataTable’ control and set ‘Data source’ to ‘collSum’.

PA_Var17

  • Run the application and keep adding the values. You should see collection values in a table as below.

PA_Var18

Notes:

  • You can see the Variables and Collection on the File menu of your App.

PA_Var19

  • If you give a context variable the same name as a global variable or a collection, the context variable takes precedence. However, you can still reference the global variable or collection if you use the disambiguation operator @[Var_Name].
  • All variables are held in memory while the app runs. After the app closes, the values that the variables held are lost.
  • When the user opens the app, all variables have an initial value of blank.

🙂