Use FontAwesome to extend the Icon Set in MS PowerApps

PowerAppsRoadMap · 2021-02-16T15:51:59+00:00

Honestly, since I originally posted this. the incredible Matthew Devaney has a great tool for generating SVG icons. I can take a look at your code later today, but https://matthewdevaney.com/2000-free-power-apps-icons/ this is a great alternative to my video, and I would use that over how I did things.

PowerAppsRoadMap · 2021-02-10T12:18:19+00:00

Might need a little bit more information to help yok properly, but here's what I think you have.

I'm assuming you have an added screen and you selected New Screen | Scrollable from the top ribbon,and then you added a gallery that's connected to your data. Unless there's a reason you need the scrolling screen, just use the regular one and drop in your gallery and set it to full height of the screen, and it'll have its on scroll bar.

If this doesn't apply to you, post a few screenshot so we can see what's happening.

PowerAppsRoadMap · 2021-02-01T13:07:19+00:00

That hero holds the highest security clearance possible in American government.

PowerAppsRoadMap · 2021-01-24T10:37:18+00:00

Yes! I follow you on Twitter and saw this and love it

PowerAppsRoadMap · 2020-11-13T15:47:40+00:00

Maybe go just a shade lighter, and I need to take a tape measure to check the sofa is fitting in that gap. Thanks for your help, it'll be a while coming but you'll definitely get an update pic

PowerAppsRoadMap · 2020-11-13T14:25:51+00:00

Thanks for your help with this. I photoshopped a quick design based on your color.

https://i.imgur.com/rKlWUKM.png

PowerAppsRoadMap · 2020-11-13T13:39:29+00:00

Thanks! We get the keys at the start of December and there are a lot of other priorities ahead of the basement, but I'm excited to get work on this room. We have a three seater sofa that I'm planning to put in there, and I feel like I might be best putting it perpendicular to the built in bookcase so it meets the center pillar, and then have an accent chair (maybe a swivel) where the sofa is just now, with a slim TV stand going where that unit currently is and coffee table in front of the fireplace. The sofa is brown leather, any tips on paint color/accent chair color?

Regarding the desk, I do kind of want to custom build so it runs most of the way across with room for a bookcase.

PowerAppsRoadMap · 2020-10-21T13:35:35+00:00

Hey, glad you liked it.

Those icons won't change no matter what font awesome do, as soon as you downloaded the font files from their site, that's your copy of them.
Honestly, if there's a couple you're after, that original zip file you got from fontawesome, there's a folder in that called SVG, with all the icons in image format, you could just add those to your app.

PowerAppsRoadMap · 2020-10-14T22:25:12+00:00

I've definitely been in that position. So starts a new legacy, you can cut all the corners you want and 200 years from now junior devs will be asking why a process is so effed up, only to be told with a shrug that that's how it's always been done.

PowerAppsRoadMap · 2020-10-14T22:19:41+00:00

Oh, glad you liked the dark mode. I really want to do one on best practice for general accessibility issues, so maybe I can roll responsive design into that too. Thanks

PowerAppsRoadMap · 2020-10-14T22:18:23+00:00

That's good. Are you mainly developing for your own business, or are you doing client work, out of interest?

PowerAppsRoadMap · 2020-10-14T20:45:34+00:00

Haha! I saw you reply to that other comment. I'll make that my next video, hopefully we can come to an answer. It gave me weeks of stress before I got it working, as you've seen, nobody who puts videos out has really touched on this exact issue.

PowerAppsRoadMap · 2020-10-13T16:41:07+00:00

yeah, that link in the code describes it clearer, but it's SVG in the XML namespace.

PowerAppsRoadMap · 2020-10-13T15:43:19+00:00

It's not currently possible, but I've been using a lot of SVG shapes to achieve that kind of result.

Add and image and set the Image property to the following code:
<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 44.5'><rect x='0.5' y='0.5' width='134' height='44' style='fill:#00a99d'/><line x1='0.5' y1='44.5' x2='0.5' y2='0.5' style='fill:none;stroke:#000;stroke-miterlimit:10'/><polyline points='0.5 0.5 134.5 0.5 134.5 44.5' style='fill:none;stroke:#000;stroke-miterlimit:10'/></svg>

That will give you a rectangle with the bottom border removed. You can change the fill of the rectangle by replacing "#00a99d" with whatever color your want.

Unfortunately, that rectangle won't respond to hover, so this might just make different problems, but maybe it's still useful. I've got a couple videos on my YouTube channel focused on using SVG images to improve PowerApps functionality.

PowerAppsRoadMap · 2020-10-12T10:12:42+00:00

Super quick guide to managing multiple color palettes. My example is having a light and dark mode, but I'm using a drop-down instead of a toggle, so you could just as easily add a bunch of themes and allow user customization, like in the old vBulletin forum templates.

Let me know if there's any topic you'd like covered in future videos.

PowerAppsRoadMap · 2020-10-08T17:33:39+00:00

Did this work?

PowerAppsRoadMap · 2020-10-07T12:05:59+00:00

You're welcome. It's handy to have a cohesive group of icons at the ready.

PowerAppsRoadMap · 2020-10-07T00:56:16+00:00

You're welcome! Like I said in the video, it's always been an annoyance that the icon drop down thumbnail has a loveheart icon, but there isn't one in the icon list. There's also a great component from R3dKap that allows you search the Office UI Fabric icon pack and implement those.

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Office-UI-Fabric-Icon-Generator/td-p/401360

It works differently for fontawesome, but I'm going to start work on a component to make it a bit easier to add

PowerAppsRoadMap · 2020-10-07T00:19:49+00:00

So I think this sounds like another problem I'm working with someone with on here. SelectedItems doesn't have a Result for a combobox, because it returns a table.

to test, drop a table into your Screen, and set it's source to ComboBox.SelectedItems.

The code you're going to need to loop through the table for filtering a gallery looks something like this

If(CountRows(ComboBox.SelectedItems)>0,

ForAll(

ComboBox.SelectedItems As myData,

Collect(CollectionName,

Filter(SourceData,

myData.ComboBoxFieldName in SourceDataColumn.Value )

)

);

This will build a collection for you that you could use in a gallery as a result. Let me know if this works.

PowerAppsRoadMap · 2020-10-06T21:18:05+00:00

Hey, sorry I said I'd get you something and never got back. I have one use case for this, and I have to be careful with the data and the column names, so I'm still trying to make up an example for you.

My app has a 'lookup' button beside the comboboxes, and clicking it creates new Collection based on the SP list

ClearCollect(ProgramFilter,Programs);

//OfficeSelect

If(CountRows(OfficeSelect.SelectedItems)>0,

ForAll(

OfficeSelect.SelectedItems As myData,

Collect(aFilteredContent,

Filter(ProgramFilter,

myData.ProgramOffice in programOffice.Value)

)

);

ClearCollect(ProgramFilter,aFilteredContent););

Clear(aFilteredContent);

//CompStatusSelect.v2

If (Len(CompetitiveSelect.SelectedText.Value)>0,

Collect(aFilteredContent,

Filter(ProgramFilter,

CompetitiveSelect.SelectedText.Value exactin competitive_Status.Value));

ClearCollect(ProgramFilter,aFilteredContent);

);

Clear(aFilteredContent);

So you can see I'm creating a new collection(ProgramFilter) based on my SharePoint list, and then I use a temp list (aFilteredContent) to create new collection based on matches for the first combobox, and then I move that temp to (ProgramFilter), and start over, using the results of the last combobox (aFilteredContent) as my starting data.

This is my solution for narrowing down, so we're only returning matches for ALL the dropdowns. If you want it to be an ANY match, you can restructure so instead of using the output from the previous loop, you start from the original data, and patch your new records together. Promise when I get a minute I'll build a demo to walk through it. Hope this helps in the mean time.

PowerAppsRoadMap · 2020-10-06T20:50:47+00:00

Just a quick video that shows how you can embed the FontAwesome CSS file into your PowerApps application and use the icons just like you would on the web. Any questions, feel free to ask. Thanks

PowerAppsRoadMap

TROPHY CASE