Plug n Play take 2

PCF plugin component developed in react – deployed into a PowerApp (model driven app)

Re-read the old post at PCF + React + Pizza = Great user experience | Arctic Cloud Developer Challenge Submissions (acdc.blog)

The PCF component written for a model driven app is a fully integrated application running on React. PCF components in Model Driven Apps are fully isolated apps that can run complex operations that are not directly related to dynamics. In this case it retrieved map information from API and shows distance and est delivery time based on location.

The search bar on top interacts with googles live address search API.

Once the search is complete, the address is written to the Model Driven app that hosts the PCF React application.

Need to figure out the time it takes for pizza to be deliverd to your work place from any pizza place, we can easily take the React component and re-build as an office add-in, teams add-in – anything you want add-in. And you are just a click away from knowing how long it takes before it’s here!

Pizza Time ordering app

Power Apps ordering app within teams that gives access to easy pizza ordering. The app is fully functional for pizza ordering operations.

Pizza Time Ordering Chat bot

Fully integrated ordering solution for pizzas with the use of a chat bot integrated in Teams

Giving customers easy options for ordering is key for selling more Pizza.


Update after request from judges, and new badge claim!

Since we didn’t show enoug last time when trying to clam the Retro badge, here we go again! Here we will show how we used paint to create the sause for the Pizza in the Head 2 Head challenge. But, paint wasn’t enoug, so we had to use Power Point as well. Had to make the transparent background in Power Point, as it’s not possible in Paint. We think that all graphic designers would either shoot themself or turn around in their grave if they knew we did this to make a red round object with a transparent background. So, if this is not a dirty hack, then how would you explain why not to the graphic designer that’s about to …… Yeah, you know…

Guiding turtles in the field to their destination

The Field Service mobile app was chosen as the main application for turtles in the field because it draws on the same database as that of the operators by default. Another reason for this choice is the fact that it has a host of functionality readily available for use without the need to build an app from scratch like we had to do for the public distress call app.

One of these features is the built-in map in the application that allows turtles to check locations, check directions and plan ahead while rushing from one emergency to the next.

This particular turtle had to rush home to take care of the family in a very real Covid-related emergency, so as you can see he is currently operating out of Vestby. Dispatchers were not aware that he left crime central, AKA. Oslo, and booked him to respond to an armed robbery in Sandvika:

Realistically speaking, Donatello would have phoned in his absence so that dispatch could manage it, but for the sake of argument let’s say Donatello decided to respond to the robbery. Tapping the location pin in the mobile app brings up quick information about the event; the emergency reporter and the nature of the emergency:

From here, Donatello taps the direction arrow symbol, and is taken straight to Google Maps with the destination coordinates already filled in. Tapping “Start navigation” brings up the navigation interface we’re all so used to seeing:

Petition to have Google add “Turtle” as a way of transportation anyone?

Glossy f*** pixels

User Experience is very important to PowerSwapCorp. To create great user experience we make sure that our visual identity is clear and consistent across all apps; for the customer as well as for the backoffice.

Visual identity

To start with a strong and clear visual identity is important. This is a guideline that all developers follow and will be embedded into all applications and communication we do as a company.

Logo

The logo comes first; it needs to depict the spirit of the company and tell you something about the company’s tone of voice. Our logo has a cartoony fell to it, has bright colours and high levels of contrast between the colours. This makes for an unserious appearance, a light and playful personality and personal tone of voice.

We created three versions of our logo – for different purposes.

The full logo looks like this:

The icon-version is the circle without the text. This version works well as icon, favicon in the browser and app icon.

The version with only the text is suitable for business apps and other applications where there is limited vertical space:

Colours

We get the primary colours from the logo, and use them to get attention, provide usability clues and add playfulness. The colours are:

Fonts

We wanted to use a special font that has the same associations as the logo and the colours; unseriousness, youth and innovation – but add a flare of techiness and geekiness. That’s why we chose the Google font “Source Code Pro” as our primary font.

You find the font here: https://fonts.google.com/specimen/Source+Code+Pro

Portal

The customer portal is branded with the logo, our font and the colours. It’s the most important window out to our customers, and therefore the most important way we can infuse our brand.

Visit the portal here: https://powerswap.powerappsportals.com/

First, we made sure the favicon (browser icon) is our icon-version of the logo.

Then we implemented a theming system using SCSS based on bootstrap. Portals are built on Bootstrap 3.3.5. The font is added as well as images that enforce our visual brand as playful and fun.

Canvas App – Seller App

Customers can sign up in the portal by themselves, but sellers are also on the road selling to customers. We created a canvas app that enables the sellers to sign new contracts on the road from their phone. It’s also branded to to enforce the brand. This is important for employee apps as well as customer apps, as it will enforce the brand presence.

PowerBI

We also have PowerBI reports for the end under; embedded on the portal. This report also have branding with colours and logo according to the visual profile.

This report is also a tool for management when they need to follow up on customers savings and how the business is going.

Model Driven

Of course the business apps the backoffice is using to handle all the customers, the contacts, their contracts and other related tables is branded.

This concludes the branding and glossy pixels for our solution.

Kjøleskapet kan se pt. 2

Nå har vi bygget videre og kommet opp med et mye mer robust kjøleskap. Flytteesker kan brukes til så mangt 😎 Fortsatt en del testing med forskjellige frukter (man tager hva man haver). Responsen er så som så, men vi er på god vei. Klementin ble tidligere eple (ref. https://acdc.blog/in2022/kjoleskapet-kan-se/), nå er appelsin appelsin, og eple er eple 🎉

Her har vi en appelsin innendørs i et kjøleskap med både vegger og gulv. Imponerende? Yes!!!
Og her er hva som ble tatt bilde av. 1-0 til AI

Oppsettet er som følger:
Webkamera montert i kjøleskapsdør, koblet til Raspberry PI.
Arduino med knapp (les mye frustrasjon med KNAPP!!!!) som trigger kamerabilde ved åpning av kjøleskapsdør.
Arduino styrer i tillegg en trinnmotor som spinner en kul 3D-printet bling på toppen av kjøleskapet (bling kommer, men se bilde).
Alt på Arduino styres av den samme Raspberry PI’en ved hjelp av Python.
Når bilde er tatt, sendes det til Azure Cognitive services for analyse, og responsen kommer som oppdagede objekter. Deretter matcher vi dette med vår egen ingrediensdatabase i Dataverse via en Power Automate flow (kjøres via en HTTP request trigger i flowen) som oppdaterer ingredienser med attributtet “In fridge” = True/False.

Bildet under viser flowen som trigges fra kjøleskaps-raspberryen. Deretter oppdateres status på hva vi har i kjøleskapet. Dette er deilig å slippe og gjøre manuelt.

Her har vi integrert rubbel og bit, og det fungerer!

Det vi frykter nå er at maskinene skal vende seg mot oss, og si at kjøleskapet er tomt til en hver tid. Da kan vi risikere å sulte i hjel foran kjøleskapsdøren.
Men inntil videre velger vi å stole på vår kjære Fridgitoid 9000

Party party, yes yes!

Well, let’s all agree on something, this is a good old fasion LAN for us adolt nerds. And we love it! But, for us, it wouldn’t be a LAN without some good 90s music! That’s why we wanted to share this mood with you all Friday night! And yes, we saw both hands in the air, heads nodding a little bit more than normal to the beat, and legs mysteriously move to the music. Thank you all, we love being here and hope you enjoyed it (we know Ulrikke did)! <3
And, since we got several request fro the playlist link, here it is (yes, it’s called Øyvind 30 år, it was the playlist for that birthday):
https://open.spotify.com/playlist/21bam2VESfvhlmNsZi0SDF?si=aa0660cc2e5d4d17

Kapaow! Real time data in Power Apps Portals!

In order to be sure all data in the Covert Operation Center is up to date, we have to make sure caching is disabled. This is not possible by design in portals. But no worries. We have a dirty hack in our sleeves.

In order to reset the cache, we must navigate to /_services/about within the solution and click the “Tøm hurtibuffer” for the page.

Then we can monitor the network when clicking the button and save the request as a fetch request. Then we create a setTimout function with location.location() at the end.

And kapow! We have real-time data as long as the page is open within and browser.

Helping out a fellow turtle

In this crazy world we turtles need to stay together and help each other. In a hackaton there is not much time for making clean code and updating the documentation. We thought we would help out another team by submitting a pull request with some code-cleanup and added description.

nINjas happily approved the changes:

Check it out: https://github.com/TommyBakkenMydland/nINjas/commit/e66048bd8488f0caacb0e9531aded1b60d56a341

Microsoft, Microsoft, Microsoft <3

Let’s face it, we all love Microsft (and yes, sometime hates Microsoft, but any type of feeling is a lot better than no feelings!). We use Microsoft technology every day, and of course we use a lot of this in our solution. Let’s go for the one first. Using Power Automate to use data input in Dynamics 365 HR to create a user in Azure AD (I know, you’ve seen this before in a previous post, but it might be easier for you to see everything in one post than for us to reffer to other posts):

Then, why should you leave it up to every employee to create their email signature? Don’t worry, we’ll solve it for you. We’ve created a solution that attach a signature on all outgoing emails that have our company name in Azure AD, configured in the Exchange setup in office365 with data from Azure AD:

Create a disclaimer as a flow rule in Exchange
Applied to senders that are employed in our company, AxShredder Inc
The signature itself is created with HTML-code
And this is how it will be, without data added
And with data added

And then, the night before a new employee starts at our company, have a Power Automate that imports the user in to Dynamics so that the user can log in to the system. Also, connect the user to the correct worker so that it can access the Employee Self-Service to see and edit data regarding himself: