PowerApps

SharePoint Modern Lists: Force forms to open in full size

SharePoint list forms on modern experience lists will open in a dialog side box by design (at the moment of writing this post, no out-of-the-box options are available to change this).

In my opinion for non-customized forms that’s ok, but for PowerApps forms in SharePoint lists, the layout is not fine when the form layout becomes large, due to currently the forms inside the lists not being perfectly responsive.

Depending on the screen resolution we get unnecessary scrollbars which makes it look poorly done. If you use the form link which can be copied from the form dialog, you can open the item in a full-screen view.

It would be nice if there was an option to configure the item to open in this view out of the box, but for the moment, it is not available. Even if we change the list settings to disable dialogs, that doesn’t take effect on modern experience lists.

But we can count on SharePoint column formatting to overcome this!

With column formatting, we can use custom JSON script to change how a field is displayed, editing or adding HTML elements to the field view. You can find a full overview of column formatting here.

In the case mentioned to force the form to open in full screen, what we need to do:

  • Choose a field to change the formatting and include a link
  • Format the link based in the item ID and the list Forms URL

If the ID field allowed column formatting we could build the link directly in the ID field, but unfortunately, that’s not an option. So we’ll have to change another field formatting, but accessing the ID field value to build the URL.

You can use the Title field which is normally used to open the items to do this but keep in mind that by overriding the field formatting you’ll lose the field button to open the contextual menu.

The JSON script for the field will be something simple as we will add just one HTML element, here’s the example:

Quick explanation:

  •  elmType: the HTML tag type you are going to display
  • txtContent: value to be displayed inside the HTML Element – in this case the current field
  • attributes: a set of other attributes to be added to the HTML Element, in our case
  • href: the link URL – built dynamically using the ID field value and Current Site URL. Add the ‘Source’ parameter to the querystring so that after saving the form you are going to be redirected to the list view (change ‘/lists/yourlist’ above to be your list Site Relative path.
  •  target: _self was chosen in this case, to open the form in the same window.

In the targeted list settings, open the column you want to apply the JSON formatting, paste the JSON content under ‘Column Formatting’ and save the changes.

Now all the items in the list when opened using the chosen field will open in a full page with this little trick.

Security Trimming PowerApps based on Office 365 Groups

PowerApps already does security trim for item-level permissions based on the Data Source permissions, but in some cases you may want to implement extra rules or more complex trimming types that are not possible with the selected Data Source. That’s when Office 365 groups come to help.

Showing or hiding controls in a PowerApps based on Office 365 group membership is not obvious but it is not a complex task.

First of all, you’ll need to get your Office 365 group Id (Guid).

If the group is a normal Office 365 Group, you can find the Group ID from Outlook on the web (https://outlook.office.com) logging with your Office 365 account.

Just select the group under the groups list, find the group welcome message, and copy the “Add to the team site” link URL (Right-click and copy URL address).

 

Paste it in any text editor, you’ll find it in the following format:

https://<tenant>.sharepoint.com/_layouts/groupstatus.aspx?id=<your id here>&target=site

Note: If the group is a security only group (without mailbox and connected SharePoint site), you’ll have to use Office 365/Azure AD PowerShell to find the group Id (https://docs.microsoft.com/en-us/office365/enterprise/manage-office-365-groups-with-powershell)

Now that you already have your group ID, open the desired PowerApp in edit mode, and add a new connection for Office 365 Groups:

In the control or card you want to condition the visibility just for members of the group you got the ID, set the visible property to be:

CountRows(Filter(Office365Groups.ListGroupMembers(“your group guid here“).value, mail = User().Email)) > 0

Which means if the group contains a user with the current user email address, the current user is a member of the group, then the formula returns true and the control is shown. Now inside your app, the control or card is going to be shown just if the user is a member of the specified group.

This is just a simple sample, but the idea can be reused and improved for more complex scenarios, for instance, assigning the membership to a variable on the OnVisible/OnStart events to manipulate it later in the PowerApp, or conditioning the DisplayMode of a control to be View instead of Edit based on the output a formula containing this rule combined with other rules.

Hope this sample helps!

New Admin Center – PREVIEW – System Settings Walk through

PLEASE NOTE : THIS POST IS BASED ON A PUBLIC PREVIEW FEATURE.

The video will give you a good idea of what is currently available within the new Admin Center preview system settings within the PowerApps user interface. Microsoft are always adding, updating and improving. This video is no holds barred. If a screen doesn’t work, it doesn’t work… But better to know than not to know. Check it out here…

You can download the PDF version of the presentation HERE. This will give users / admins the ability map the paths in the new UI to the current navigation paths in the classic UI.

I really hope this helps someone out in the quest for PowerApps knowledge and appreciation.

As always, please contact me or leave a comment if you need more information.

UnBoxing the Power Platform Model-Driven Form Designer Preview

I saw recently on Twitter that the WYSIWYG Model-Driven form editor is in preview and I thought, “HEY, Why not do a video without ever opening and testing this functionality”… SO that’s exactly what I did. it’s a little bit all over the show and as I find stuff I get more excited. I had to edit out a cough a few times, but other than that, this is raw footage of a totally new experience for me (gulp).

My opinion is that this is a great preview and I think that this is really going to make config a lot easier when its complete. Yes, there are things missing, but its a PREVIEW. it was fun to test it and I’ll be doing my best to use this as often as I can to i can get used to it.

 

 

SharePoint capped at 500 records- Data Row Limit for non-delegable queries

So I was busy creating a nice Canvas App using the brilliant Patch command when my records stopped transferring across to SharePoint at exactly 500 records.

Knowing that SharePoint can hold many more entries than this I was slightly confused – on deeper investigation I found the little gremlin blocking my patch commands (File>App Settings>Advanced Settings):

When increasing this limit it allowed my records through. I hope this helps someone out there!!!

Attaching files to a record through Canvas Apps, using the Common Data Service Connector

I found this very cool little piece of functionality that allows you to attach a document directly to a record within a canvas app by leveraging standard functionality within the Common Data Service (CDS) Connector within Power Platform.

Now, this may seem silly, but previously I had been using SharePoint, Flow and all sorts of other creative little techniques to store documentation. I had never seen the attach “Field” available within the fields list in Canvas Apps. I am assuming that other folks might just scroll past it as well… So hopefully this pits a bit more focus on it.

The thing to remember here is that the document is stored within the CDS and will count towards the storage utilisation of the CDS instance and your current tenant. SO, make sure that if you are going to do this, you understand the repercussions that this has on your storage. This may be useful in demo or presales exercises as well.

To see how to do it, check out the video and follow the process.

Change date format to DD-MM-YYYY in a Canvas App

I live in Australia.  One of the first things I do (right after removing the word “Zip” from the postcode field!) in a new Dynamics 365 demo is to change the date format to DD-MM-YYYY instead of the US date format MM-DD-YYYY.  It’s a little thing, but often it’s the little things that can make a big difference.  If you’re in one of the many countries in the world that doesn’t use US date format, working with a business system that shows the date in the wrong format is just annoying.  Putting it in front of a customer feels jarring.

So, when I came do to my first PowerApps (Canvas App) demo for a customer here that involved showing a date field, I *had* to work out how to get rid of that pesky US date format.  It took a bit of Googling around and experimenting, but it turns out a simple formula will do the job.  I have this one readily available for copy-paste every time I create a PowerApp now, so I hope this will make things easier for those of you also outside the US.

The magic formula:

Text(ThisItem.’Est. Close Date’,”[$-en-US]dd/mm/yyy”,”en-GB”)

(I’ve used the Opportunity Estimated Close Date here as an example – simply substitute the name of your actual date field in place of “Est. Close Date” in this formula).

Bingo.  Happiness.

 

 

My Quest to D365 Saturday Stockholm

Recently I attended the Dynamics 365 Saturday event in Stockholm and I have to say, what an excellent event. I have never been to Stockholm, so I was already massively excited about this. I also got to meet a load of new people for the first time which was AMAZING!

These events are so important for the community because they are often the only opportunities some of the community members really have to interact with other customers, partners ISVs and Microsoft employees. I love running into people that have encountered the same issues as I have, that way I know I’m not going bonkers and we can work on a solution together.

The crowd was great! There were many enthusiastic people in the audience who were really getting involved in the sessions, looking for information and really testing all of the speakers knowledge. You can find the list of sessions and speakers HERE.

I big reason I really enjoyed this event was the different layers and levels of content being shared across the sessions. The sessions were split into three tracks, these being:

Applications (Dynamics 365 CE), Dev (Dynamics 365 CE) and Business & Project Management. This gave participants the opportunity to stick to a single, themed, track or weave between tracks. This is pretty much how my experience went. I went to at least 1 session from each track. I wanted to get a flavour for everything. I also got to see some wizardry from folks like Julie Yack, Gus Gonzalez, Nick Doelman and Gustaf Westerlund.

Other presenters and panellists included Sara Lagerquist, Jonas Rapp, Fredrik Niederud, Katherine Hogseth, Mark Smith and Antti Pajunen. Each delivering some amazing content based on their experiences with Dynamics 365 and Power Platform.

There was a plethora of information and content being shared between speakers and passionate attendees. Everything from Microsoft Portals and Social Engagement to developing your own XrmToolBox tools (Careful with the spelling here….HAHA) was being talked about. I personally got involved in a number of Power Platform conversations, which suited me just fine because that’s kinda what I’m doing at the moment.

I had the pleasure of running 2 sessions. One in the Application track and one in the Dev track (I am no developer… Don’t judge me). The 2 sessions were:

  1. Power Platform – How it all fits together (Download Here)
  2. Building your first Canvas App with CDS, and Azure (Download Here)

Apparently people don’t like the first 2 rows.. great crowd though! Thanks to everyone that attended. Try work out what Mark is doing in the background there! HAHA!

The first presentation focused on the different elements of the Power Platform and the way it all works together. Many Dynamics 365 users often worry a bit about this because it seems so large and complicated, but it really isn’t once you have wrapped your head around the different technologies. To highlight the way the different elements of the technology worked together I included a Roadside Assist demonstration that was created during the PowerApps & CDS Hackathon Those Dynamics Guys and Hitachi Solutions Europe hosted together.

My second presentation consisted some of the “Do’s and Don’ts” around building your first Canvas App with your customer. I followed the presentation with the following:

  1. Adding several fields to a custom entity in the Common Data Service (CDS)
  2. Importing some data
  3. Creating a new canvas app
  4. Connecting the Canvas app to the CDS
  5. Adding in the Azure translation service to the app
  6. Publishing the app

The actual canvas app I created with the little model driven app solution, including data is available HERE.

The below pic gives of the impression that I am about to start having a conversation with my own hand, like an invisible Muppet. May be a great trick for my next demo 😀

One of the BEST sessions that I have been in was the “CAGE MATCH” moderated by the one and only Julie Yack,  This was EPIC fun! We were split into teams of 5 and given problems by the audience to resolve. It was a little daunting being in the presence of some of these long time MVPs, BUT, THE SHOW MUST GO ON, so we got stuck right in. Unfortunately, the team I was in didn’t take the win 🙁 Its cool, I am preparing my battle cards for the next one!

All in All, it was a fantastic event and a great opportunity to network with this amazing Dynamics and power Platform community that we all have grown to know and learn from. A MASSIVE thank you to the sponsors of the event!

Also, a big thanks to all of the folks that hung out after the event and enjoyed several beverages with me. Was a great time and I’d love to do it again 🙂

Here are some more delightful images from the day 🙂 My camera skills aren’t great so i had to grab a few from social. Thanks to those that grabbed pics in my session! I hope that this encourages more people to attend these events because I genuinely gain so much from being there.

Nick Doelman Smashing his Portals Presentation

One of my favourite Finns – Antti

Julie Yack doing her presentation on Social Engagement

MORE of the awesome Julie Yack

WHAT?? ANOTHER ONE of my favourite Finns – KIMMO!

JOOONNNAASS RAPP!!! The Legend!

We were all so excited! mark, Jonas and me 🙂

 

 

How to embed a Canvas app into a CE form, pass the record id and update the CE record.

The requirement: Allow a CE user to update marketing consent and to provide guidance and logic around the process, this app is the basis for the latter.

Solution: This could be achieved using a custom webpage, or possibly a Dialog (deprecated soon), but the latest recommended approach is to use a canvas app embedded within CE, so here are the steps to achieve this;

Note: this screenshot/app was to prove the process works so has some random fields in it, ultimately there would be a lot more to it with extra logic.

  1. Create the connection to D365
  2. Browse to Apps and Create a new blank Canvas app
  3. Insert a new Form (Edit)
  4. Select [Data Source] and Add new, select your connection to D365 from earlier
  5. Choose the appropriate D365 environment
  6. Select the [Accounts] table and [Connect]
    • This will add some fields to the Form for you and is where you can select the ones you want/don’t want, format them/rename them, change the colours etc.
    • The blue header/footers in my example is a [Label], white text, blue background, the colour code is #3B79B7 which matches the CE UI theme
    • Rename the Form in the left panel from Form1 to [AccountForm]

  1. Next, you need to update Form to take an input parameter with the ID of the CE record which we will pass in further on, on the Form, select [Advanced], then [Item] and enter
    • LookUp(Accounts, accountid= Param(“ID”))
  2. Next insert an Icon – [Check] so that we can Submit the changed data back to CE, go into Advanced on the Icon and Update the OnSelect to;
    • SubmitForm(AccountForm)
  3. Save and Publish the app
  4. It should now look something like this, depending on the field types you select, I added a footer with the CE ID value displayed to check what was passed through.

  1. Browse to https://web.powerapps.com/environments/ then Select [Apps] from the left menu

  1. Click on the ellipsis of the App, and make a note of the Web Link from the [Details] Tab. It will look like this – https://web.powerapps.com/apps/<AppID> make a note of this APPID for the steps below.
  2. Next is the CE components, add a new HTML Webresource and paste in the following code replacing the <AppId> with the one you recorded previously.
    • Set the width and height to your App sizes, taken from the App settings page.

  1. Open the [Account] entity form, Add a new Tab, Insert a new Web Resource onto it, select the web resource that you created in the previous step and set the following parameters;
    • Display Label on Form= false
    • Number of rows = adjust depending on the size of the App
    • Scrolling = As necessary
    • Display Border = false
  2. Save and Publish
  3. It should look like this once it’s finished

 

A weird little Option Set Error

The other day I was getting this weird little error when building a canvas app. Basically, all of my CDS Optionsets just randomly stopped working.

I hadn’t actually realised that I had left the “Experimental Connector” setting on while testing out the lookups. I think there must have been some sort of update. Pop into File | App Settings | Advanced Settings and turn of that little toggle.

I hope this helps someone out because I had a mild panic 😉

Making PowerApps accessible

One item I have seen overlooked in PowerApps is the functionality around the “App Checker” ….”But William I use the App checker”…. I do not mean the formula app checker I am referring the “Accessibility” checker shown in the image below:

 

It is prodigiously important when creating apps, well anything actually, that it is made available for ALL people – this includes those that may have issues with hearing, sight and other impairments. Jenny Lay-Furie provided us with an absolutely phenomenal presentation on accessibility and how Microsoft have helped, and continue to help, many people from all walks of life live well their life!

PowerApps has an accessibility checker (shown in the image above) which I implore you to monitor when creating apps as this will help you fine tune object for accessibility that you may not have thought of such things like ‘Tab Stops’ – those who have to interact with your app using a keyboard will need this functionality to be set up.

The following items are crucial for accessibility:

  • Layout and Colour
  • Keyboard Support
  • Screen Reader Support
  • Multimedia captions

Now due to time I do not have time to write out my guide to improving accessibility but fortunately I do not have too as Microsoft have provided us with a brilliant PowerApps focused guide which I have copied below or you can find the link here


Layout and color

Common sense and uncomplicated design helps apps be more accessible to all users. When doing heavy customization of apps take note of the below suggestions. PowerApps themes are by default accessible.

  • Ensure all elements are clearly visible and text is of sufficient size. All content must be easily read and understood by the naked eye.
  • Avoid using the visibility property of items to bring an element into view. If you need to show something conditionally, create the content in a new screen and navigate to it and back.
  • Ensure input elements are labeled on the screen. AccessibilityLabel property defines what the screen reader will announce.
  • If customizing colors, ensure the contrast of text:background is 4.5:1 or greater. Software tools that assist this process are readily available.
  • Ensure layout follows a logical flow when read top-bottom, left to right.

Keyboard support

When testing your app’s accessibility, ensure the app can be used with the keyboard only, the accessibility modes on iOS and Android, as well as navigated successfully with the screen reader enabled.

For keyboard navigation (with or without the screen reader) ensure that a logical order is followed when using the TAB key to navigate to input fields by setting each control’s TabIndex property:

  • Label, Image, Icon, Shape contols – if they represent interactive elements (i.e.buttons) set TabIndex to 0; if they are decorative elements or text, set TabIndex to -1.
  • Avoid setting tab index higher than zero.

Screen reader support

The following software combinations are the supported recommendations for consuming PowerApps with a screen reader:

  • Windows: Edge / Narrator
  • macOS: Safari / VoiceOver
  • Android: PowerApps app / Talkback
  • iOS: PowerApps app / VoiceOver

To ensure a satisfying experience with the screen reader it is recommended to:

  • Ensure all input controls have the AccessibilityLabel property set.
  • For images set AccessibilityLabel to an appropriate description.
    • If a picture is not used as a button or a link (i.e. icon is there just for the decoration) and should not be read by the screen reader, make sure the AccessibilityLabel is empty or not set.
    • If a picture or an icon is used as a button, then set TabIndex to 0 and AccessibilityLabel to the link description.

Multimedia

Ensure all videos are captioned and a transcript of all audio recordings is available to the user. Video control suppports closed captions in WebVTT format via the ClosedCaptionsUrl property.

Note that with the screen reader enabled, Timer does not announce button text, but how much time has passed. Announcements can’t be turned off, even if timer is hidden with low opacity.

Working with signatures

If you have a signature field that uses the PenInput control you need to enable an alternative method of signature input. The recommended way is to show a TextInput control where a user can type their name. Ensure the signing instructions are placed in the AccessibilityLabel property and the control is placed close to the Pen input – to the right or immediately below.

Related: