Despite getting sick and being unable to attend in person, the organizers were still kind enough to let me present!
More details later, probably. But for now… Slides!
Advanced List Formatting
Despite getting sick and being unable to attend in person, the organizers were still kind enough to let me present!
More details later, probably. But for now… Slides!
Advanced List Formatting
This is the 3rd of a series that could easily be called “Doing Stuff Nobody Asked for in Power Apps”. You can find the previous parts here:
Now it’s time to extend our binary conversions a little farther to allow us to get the binary value of an ASCII Character just like you’ve always wanted! Again, allow me to give another unclear reassurance that there are legitimate reasons why you would do these things and I promise the next part in this series will make that clear.
I recently needed to get the binary value of an ASCII character (as you do). So, I just figured I’d get the ASCII value for a character and then use my handy Integer to Binary conversion method to take care of it. As you have likely guessed (by the fact the I’m writing a whole post about it), this wasn’t nearly as straightforward as I had thought.
If you know the ASCII code (value) for a character, Power Apps makes it very easy to get that character by using the Char function. You can literally use Char(65)
and you’ll get A
. Nearly every language that has this function has its reverse usually called something like Asc and you could call that with A and get 65. But if you’ve been using Power Apps for very long you’re likely not surprised to learn that Power Apps has no equivalent function. Blarg!
A quick search came across this excellent article by Tim Leung, Text – How to convert a character to its ASCII numeric value. In this post, Tim lays out a method to generate a collection using the Char function against numbers 0-255 that can then be used to lookup the ASCII value and he does it all in a single line. If that’s all you’re here for, then click on that link and you’re done. In our case, we need to go just a little farther and be able to get the binary equivalent of the ASCII value for a character so we’ll be combining Tim’s technique with our integer to binary conversion logic laid out previously.
To make this a little more understandable, I’m going to break this down into pieces. The first is the generation of a collection that will contain the values. Later I’ll show you how to use the collection to get individual values.
I’ve setup a beautiful Canvas Power App with this screen:
asc
collection, a label that counts the values for debugging and a button to generate the collectionI’ve done this all in a button to make it easier to demonstrate but in reality you’d probably put this code in your App.OnStart
if using it frequently. You wouldn’t need any of the other controls above either.
For those that read the last part in this series, we will be reusing / adapting some of that code. You don’t need to read that article to get this to work but it would probably help make sense of this stuff.
Here’s the code from the OnSelect
of that button:
Let’s look at what’s happening line by line:
intToBinary
) to store results as we calculate the binary equivalent of the ASCII value. So, we clear it out before starting.asc
collection which is the actual collection we are building.firstDigit
is set to the total number of rows in the binaryDigits
collection minus one. This allows us to know what the “size” of the number will be without having to hardcode it.input
is set to the number we get from the Sequence function. This is the ASCII value and what we’ll be using in our binary conversion.itbOffset
is the current number of rows in the intToBinary
collection. We store this because we cannot clear a collection within a ForAll yet we need to use it 255 times. So we store the offset to know which set of records in our collection apply to which value.binaryDigits
collection. It’s this loop that will do the conversion of the ASCII value that we’ll be referencing later. The details of what this code is doing were covered in the last article.asc
collectionNum
and this is the ASCII value. If you only need the binary value this step can be eliminated.intToBinary
collection using the LastN function to only pull those values after our itbOffset
to ensure we only get the binary conversion calculation values for the number we’re on. There is extra code here to trim the leading zeros from the binary values. Again, more details on how this code works can be found in the previous article.You can use the collection by pulling values using the LookUp function. For instance, if we wanted to pull the ASCII value for the letter A we could write LookUp(asc,Char="A").Num
and the result would be 65
. If we wanted the binary value we would modify it to LookUp(asc,Char="A").Binary
and the result would be 1000001
That’s it! Now you can get the binary value of any character’s ASCII code – WOWEE!!
Want to learn how to use this collection to do more stuff that probably has no place in Power Apps? Come back for Part 4: Calculating a DJB2 Hash in Power Apps!
This is the 2nd part of a series that should probably be called “Silly Challenges in Power Apps for Nerds”. You can find the first part here: Converting Binary to Integers in Power Apps.
Once again I will vaguely allude to the fact that there are good reasons to do this and all shall be revealed in the fullness of time. In the meantime, if you need it – here ya go!
Converting numeric values to their binary equivalent (as text) is a little more challenging than the reverse. This isn’t really because the concept is much harder, it’s more that Power Apps makes us work a little harder. But speaking of concepts, here’s Chris’ 2 minute summary of binary to integer math:
The main thing we need to know is that binary digits (1 or 0) indicate if the value they represent are “on” or “off”. In our case, when the digit is “on” (1) then the value it represents will be added with all the other “on” values and this total will be the number we’re looking for.
Something to keep in mind that we didn’t have to directly worry about when we were going from binary to number is the “size” of the numeric data type. This just means the number of digits (bits). The bigger the number, the more bits required. For instance, 255 in binary is 11111111. 8 digits = 8 bits. More on this in a moment.
Once again, a beautiful screen was created in my Canvas Power App:
Here’s what is in the OnSelect
for the button:
Let’s look at what’s happening line by line:
App.OnStart
.binaryDigits
collectionbinaryDigits
collection for every time we loop through our temporary collection from Sequenceindex
value is set to the number we get from Sequence. Later we’ll use this value to determine if we’re on the first digit or not (this allows us to change the “size” of our temporary collection without having to update our conversion code).intToBinary
) to store results as we process the binaryDigits
collections. So, we clear it out before starting.firstDigit
is set to the total number of rows in the binaryDigits
collection minus one. This allows us to know what the “size” of the number will be without having to hardcode it.input
is set to the Text Input’s Value so that we don’t have to reference it directly each time making our code more portable.binaryDigits
collection we just generated above.remainder
. We get this by using the Last function to pull in our most recently added item in the collection (the last iteration of the loop) unless this is the first iteration (index = firstDigit
) in which case we use the full value of the input.binaryResult
to this directly. But, we want to trim all the leading zeros to make it easier to read.binary
columns of our temporary collection into a single line of text. This works because we evaluated from left to right meaning our calculated digits are already in order.Perhaps looking inside the intToBinary
collection will help make sense of what we built:
There you have it! Now you can FINALLY convert numbers to binary strings. Wowee!
Looking for more exciting low level looping in Power Apps? Come back for Part 3: Getting the Binary Value of an ASCII Character in Power Apps!
I promise there are legitimate reasons why you might have to work with binary integers in Power Apps and that’ll be more obvious near the end of this series which should probably be titled “Doing low level operations in Power Apps for masochists”. For now, know it’s possible and if you need to do it here’s the guide.
Converting binary values (as text) to their numeric values is “relatively” straight-forward (at least for this series). There are a bunch of guides on how to convert from base 2 to base 10 conceptually and if you’re interested in all the details, go check em out! For our purposes, here’s a basic overview (don’t weep hardcore computer scientists):
Binary digits (1 or 0) indicate if the value it represents is “on” or “off”. In this case, “on” (1) means that value should be included when calculating the result. The values start with 1 and double each time so that the values are 1, 2, 4, 8, 16… etc. to whatever “size” for the data type (read right to left):
As you can see from the image above, the values (1,2,4,8,16…) are really just increasing powers of 2. We’re going to use that fact to our advantage.
So to convert binary to a number, add the values to each other whenever there’s a 1 in the corresponding positions.
I went all out in my Canvas Power Apps design skills and created the following screen:
Here’s the contents of the OnSelect
for the button:
Let’s look at what’s happening line by line:
binaryToInt
) to store intermediate results as we process the binary text character by character. So, we clear it out before starting.input
which we can reference rather than the Text Input’s Value each time (and it gets cleaned up at the end)binaryDigit
, we want to work with.Value
keyword which in this case references the number from the Sequence function we used earlier.Value
keyword which references the number from the Sequence function used earlier. However, we have to subtract one because Sequence starts with 1 (rather than 0).Value=1
) in which case it’s just 0.Looking in our temporary collection, binaryToInt
might make it a little easier to understand:
Or maybe it didn’t?! Oh well!
The good news is that it works – so copy and paste as you please. And for those of you who can’t get enough of doing things in Power Apps that were not intended to be done in Power Apps, be sure to come back for Part 2: Converting Integers to Binary in Power Apps!
I had the opportunity to speak at the M365 Collaboration Conference in Las Vegas this past week and it was awesome! I loved seeing all the friends I haven’t been able to see and I always enjoy the energy and excitement of a bunch of people gathered to learn and teach about stuff we all care about.
I helped teach 2 full day workshops and was able to once again give one of my favorite sessions: Advanced List Formatting. I love presenting this session because it’s demo heavy and it’s so fun being creative with lists and watching people’s eyes light up at all the possibilities.
For those that are interested, my Advanced List Formatting slides can be downloaded here:
Feel free to use the slides in your own presentations (internally or externally). If you feel like giving me credit, that’s great! But it’s not required. Sharing is caring afterall! The slides have several extra slides we didn’t go over (I prefer the demos) that will hopefully provide some additional insight. Feel free to reach out with questions.
Here is the list of samples I used in the demos so you can recreate what we went over:
groupProps
to customize grouped fields to create a miniature application. We also briefly looked at an alternative FAQ FormatUsing icons for buttons is a very common scenario in Power Apps and Microsoft has provided the Icon control to accomplish just that. But… there are only 106 across 4 categories which isn’t a whole lot when it comes to icons. So if you are making anything of any complexity you’ve likely already run out. Fortunately, that’s
Just use their stupid icons
But what if you don’t want to use one of the very few icons they’ve provided? What if you found Flicon and would like your app to match the rest of Office 365 and use the Fluent / UI Fabric icons? Or perhaps Font Awesome or the Noun Project or something your kid drew?
Fortunately, there are still options! There is a pretty easy option laid out in the OKish Solution below and then a PITA Solution that works but there are several steps involved. I’ve included both, but I definitely think the PITA Solution is the way to go until Microsoft figures out something better.
Use images but be satisfied with Border or Fill effects
What if you want more than just a changing background or border? You know, like how the icons themselves work in Power Apps? For this, we’ll need a custom icon as an SVG. These steps could be adapted to work with a PNG image, but SVG is very common among icon sets and provides a better result overall.
First step, get your icon! Font Awesome and the Noun Project both provide all of their icons in SVG format. However, I recommend using the Fluent Icons provided by Microsoft since that’s what’s being used everywhere else. For that, let’s head over to Flicon.io.
If you haven’t used Flicon.io before, just search for an icon you want to use or browse with the categories. Once you’ve got an icon in mind, hover over it and switch to the Export tab. You can mess around with colors if you’d like, but it isn’t really necessary for what we’re doing. Just click Save as SVG:
We need to edit the SVG file before it’s ready to be used. There are plenty of tools out there to do that, but I use a free, open-source tool called Inkscape. You can download it directly from the site or just install it from the Microsoft Store.
Open your icon in Inkscape. One thing you’ll notice is that most of the icons are square, but the image isn’t always centered. Don’t worry, we’ll account for that to ensure our icon is a centered square.
In Power Apps we can use an SVG as the Image for an Image control. The Image control has HoverFill
as we showed above. We’re going to take advantage of that and create an inverse of our icon. This means we’ll be creating an image that is the background and leaves the part of the icon we want displayed transparent. This allows us to set the “color” of the icon using the Fill
and HoverFill
properties!
In Inkscape, draw a box (fill color doesn’t matter, but it shouldn’t have a stroke). The size doesn’t matter just yet. Grab the square tool and draw something. Don’t worry about making it perfectly square.
Click on your icon and look at the Width and Height displayed. Take note of the bigger of the two (mine happen to be the same):
Click on the square you just drew and put the value you just noted for both its width and height. Now you have a box sitting somewhere near your icon that is the same size as your icon’s largest dimension. If you want additional padding for your icon, add that to the box’s dimensions.
Now we’re going to line them up. Open the Align and Distribute panel (Object > Align and Distribute). Select both the box and your icon. Ensure the Relative to dropdown is set to Page then click the Center on Vertical Axis button followed by the Center on Horizontal Axis button. Your box should be totally covering your icon now.
With both the box and the icon selected (just select all if you clicked off of them), perform an exclusion (Path > Exclusion). You now have one object and it is the negative space around your icon (remember the color doesn’t matter).
You’ll notice we’ve got an extra space around the icon and the document size (seen as a black square above). This is because our icon wasn’t perfectly centered before. If your icon looks good, skip ahead. To fix it, however, go to Document Properties (File > Document Properties). In the Custom Size options group, expand the Resize page to content section and click Resize page to drawing or selection.
Let’s save our SVG. Although we can use the default format, there’s a lot of extra stuff added that we don’t need. So let’s Save as (File > Save As…) and change the type to Optimized SVG. In the dialog that pops up, here are the options I’ve chosen with the goal of reducing SVG complexity/length:
Let’s open up our SVG file using a text editor like Notepad. You should see some XML with a viewBox attribute and one or more paths. Let’s do a find for double quotes and replace them all with single quotes.
Although we can add an SVG file as media and use it that way, I like to have a little more control. So, let’s add an Image control to your App. In the Image
property we’re going to replace SampleImage with some text. The first bit of text is just a string:
"data:image/svg+xml;utf8, "
This will let us use the SVG text directly. To do that we need to add the EncodeUrl
function. So connect the text above with an &
and enclose the SVG text (copied from notepad) in double quotes inside of the EncodeUrl
function (don’t forget your closing double quote and parenthesis):
The icon is showing, wowee! Now we need to make that fill match the background (the black stuff shown above). So we can edit our SVG string to add fill='white'
(or a HEX or RGBA value that matches your background which is white in my case).
Where did that icon go?! It’s still there, it’s just being sneaky.
Now for the magic! Set the Fill
property for the Image control (shown as Color in the properties window for some reason) and your icon shows up! WOWEE!
Now set the HoverFill
to some other color and hold Alt to see the magic.
This is not a perfect solution and the fact that this is our best option is pretty frustrating. But… it gets the job done but with a few notable issues when compared to using the native icons:
OnSelect
actionWidth
to Self.Height
and control just the Height
)I was recently asked to write a PowerShell script that identified a bunch of pages and emailed them. They wanted the emails to include the Banner Image (the page/news thumbnail). No problem, I’ll just grab the handy BannerImageUrl field and stick it in some HTML, right? Nope.
Although you can certainly create an email with images using the URL, unless the user is logged in, those images will cause a bunch of authentication errors. This is especially a problem for people checking their email on their phones. Sadness!
Fortunately, you can grab those images in PowerShell and convert them to base-64 strings. That way the authentication for the images is only needed when running the script and not when the user opens the email.
Here’s a basic script that covers the concept using PnP PowerShell:
In the Gist above, the HTML value is put in your clipboard. This is just to make it easy to prove it works. Run the script, paste the result in codepen in a browser where you are not authenticated to the site and witness the magic!
The key bit is the setup of the web client (lines 8-10) and the call to convert the downloaded data (line 18). You can easily wrap this logic up inside a foreach loop to process all your pages/news and build a nice html based email. Wowee!
You may have noticed that your classic administration links are now missing from the SharePoint Administration center. Good luck editing your search schema or creating an app catalog now!
I have no idea why this was removed and hope this is corrected soon. Seems like a mistake to me even if the goal is to eventually roll out updated versions. Fortunately, if you happen to have the old links you can still visit them. Surely you bookmarked them all?!
No need to excessively weep! Reduce your wailing to dry sobs because here are the links to the missing admin pages. Copy them and paste them after your sharepoint admin domain (see below for an example).
infopath
/_layouts/15/TenantForms.FormServer.aspx
user profiles
/_layouts/15/tenantprofileadmin/manageuserprofileserviceapplication.aspx
bcs
/_layouts/15/bdc/TA_BCSHome.aspx
term store
/_layouts/15/termstoremanager.aspx
records management
/_layouts/15/TA_OfficialFileAdmin.aspx
search
/_layouts/15/searchadmin/TA_SearchAdministration.aspx
secure store
/_layouts/15/sssvc/TA_ManageSSSvcApplication.aspx
apps
/_layouts/15/online/tenantadminapps.aspx
sharing
/_layouts/15/online/ExternalSharing.aspx
settings
/_layouts/15/online/TenantSettings.aspx
configure hybrid
/_layouts/15/online/SharePointHybridSettings.aspx
access control
/_layouts/15/online/TenantAccessPolicies.aspx
data migration
https://docs.microsoft.com/en-us/sharepointmigration/introducing-the-sharepoint-migration-tool
With the exception of that last one, type in your sharepoint admin address (tenantname-admin.sharepoint.com) and then throw the link above after it.
For instance, here’s my classic search administration link:
https://thechriskent-admin.sharepoint.com/_layouts/15/searchadmin/TA_SearchAdministration.aspx
You can use this link to get to the original “More features” navigation page to make getting these links a little easier:
https://admin.microsoft.com/sharepoint?page=classicFeatures
Additionally, if you add ?showclassicnav=true to the end of any of the above links you’ll get that classic side navigation.
The Embed web part for modern pages lets you display content from secure websites right on your page. Want to show a YouTube video? Grab the embed code from youtube.com and slap it in the Embed web part. Wowee!
By default, modern pages support 30+ sites including the most common like YouTube, Vimeo, TED, and internal domains like Stream and OneDrive. But what about when you’ve got content from a site not on this list? You’ll end up with an error similar to this:
Don’t cry! Wipe those tears off that wet face! If you just need to allow the domain for a single site, the instructions are right there (here’s a quick summary):
But wait… Corporate just rolled out a video hosting platform for the enterprise and they want all sites to be able to embed content from this new site. Does the thought of repeating the above steps hundreds or even thousands of times make you weep in despair? Smack those tears off your moistened face!
Here’s a quick snippet of PowerShell which will show you how to add it to multiple sites:
In the PowerShell above, I’m using PnP PowerShell. You can technically do this without PnP PowerShell since it’s just CSOM, but… why would you make your life harder?
Here’s what’s happening:
You can easily adapt the script above as part of your provisioning process to ensure that new site have the correct domains whitelisted as well. So fun!
Now you can take content from all over the web and mash it together to bring all the relevant stuff directly to your users. WOWEE!
I’m still at SPC right now. It’s awesome.
I’ll write more later, but for now, here are my slides. Thanks!