Dashboard for end customers!

We have created a great-looking dashboard with three pages for potential and current customers.

“Today’s Overview” page are showcasing today’s electricity price and the provider with the best and lowest price. It is easy to compare between electricity providers and get an overview of how today’s market behaves. You can also see your maximal potential savings.

The “Electricity providers last 30 days” page gives the customer an even greater overview of the current market situation. All the electricity providers are matched up against the Spot Price, and it is easy to spot the providers with the biggest fees. We have also included a comparison between the cheapest variable price and the fixed price.


We have created a great-looking dashboard with three pages for potential and current customers. “Today’s Overview” page are showcasing today’s electricity price and the provider with the best and lowest price. It is easy to compare between electricity providers and get an overview of how today’s market behaves. You can also see your maximal potential savings. The “Electricity providers last 30 days” page gives the customer an even greater overview of the current market situation. All the electricity providers are matched up against the Spot Price, and it is easy to spot the providers with the biggest fees. We have also included a comparison between the cheapest variable price and the fixed price. The “Energy Origin” page gives you an overview of where the electricity is generated between the providers. And to the left in the graph, we can analyze the top three providers with the most renewable electricity and compare it to their electricity price

Portal as Progressive WebApp

“Enable your portal as a Progressive WebApp (PWA)” is a preview feature that will go GA in February 2022. This is pretty hipster.

When Portal is enabled as a PWA it can be published to Google Play and Microsoft Store and be used as a native app on mobile devices

https://docs.microsoft.com/en-us/power-platform-release-plan/2021wave2/power-apps-portals/enable-portal-as-progressive-web-app

Enabling the portal as a progressive webapp means that users will experience it as a mobile app on their phone. It can also be packaged and uploaded to Microsoft Store and Android Google Play.

We want the end user to have a mobile app on their phone where they can see what kind of agreement they currently have, look at reports on their agreement history and see forecast on what their price will be in the future.

Enabling PWA

Microsoft documentation here: https://docs.microsoft.com/en-us/powerapps/maker/portals/build-progressive-web-apps

Open make.preview.powerapps.com

Identity the portal and click the element menu. Click “Edit”

This will open up Power Apps Portals Design Studio.

When it has worked a little while it’s good to go.

So “preview” that it doesn’t work..

We wanted to upload the app to Microsoft Store and Google Play so users can have it as a native app on their mobile device. This is proving difficult, and it’s apparent when working in the PWA Builder that things are not quite ready..

PowerShell with Portals CLI

Power Apps Portals can be handled using Portals CLI that became available this winter.

Documentation here:

https://docs.microsoft.com/en-us/powerapps/maker/portals/power-apps-cli

ALM Best practise

Working this way is best practise for Application Lifecycle Management (ALM) and makes it possible to deploy portals to dev, test and production in a painful and fluent way.

Powershell with Portals CLI

We use PowerShell to handle Portals commands to authenticate, create auth profiles, download and upload portal content. This enables us to use Visual Studio Code when working with Portals code.

Auth

Download

Portal code in VS code

Plug n Play!

The Salespeople get a call from a new customer, they can register a new client using our simple form in SharePoint. The forms have been created using SPFx (SharePoint Framework) with React. The data from the form will then be processed and sent to DataVerse using a Cloud Flow to create a new contact.   

When the form is submitted, it creates a record in SharePoint, which we then create a contact in DataVerse with.

When the customer gets created in DataVerse we figured out we want to create a flow that alerts on both email and teams chat when a new customer arrives, this allows our resources to verify the customer and add the customer to our flow.

When a contact record is created, we automatically post a message in teams and send an email to our dedicated email.

Tag: Plug’n’Play & Stairway to Heaven

Its all about apps and responsiness

We have created a model-driven app to contain our customer card, this customer card contains a lot of data about the customers and which deal they have, and started with.

We have also embedded a Canvas App into this model-driven app which includes top deals right now.

During the creation of these apps, we had a focus on making this responsive. So the information could be reached whether you are on a mobile, tablet, or desktop device.

As you could see in the picture above, we can see that the model-driven app, with an embedded canvas app, is responsive.

The real nasty hacker

  1. When visiting www.elskling.no we used Fiddler to decrypt the HTTPS traffic to find the API they are using to get data. And turned it into our own custom connector.

2. We came above another API that gets both historical and today’s spot price in Norway. This could be filtered with “NO1” and so on, based on where in Norway you want to get a price from.

After getting some errors using the API, we needed an API key. After submitting an email to the email listed we received an API Key. After some more research, we could see that this is an API created by a “hacker” who abuses another public API that requires payment. We think that this is the ultimate candidate for “Thieving bastard”.

We are using this API to visualize today’s spot price and to create a local history in our database to create forecasts on prices with AI in the future.

3. The last API we are using is to get each day’s weather forecast, this is going to be combined with historical spot prices to forecast future prices on electricity. These prices are very much based on weather, and that’s why it is very relevant to include this in our library of apis.

Visual identity

We have created a visual identity for our brand

In OneNote we have a visual guide that all apps and services should follow.

In addition we have created a logo that apply to the colours and embodies the playfulness and professionalism that the company embodies.

The logo is picturing a lightning symbol with arrows around it to symbolise that the company deals in swapping electrical providers. The lightning symbol is also indicating the automaticallity of the processes if switching from one provider to another.

Full logo

The full logo will be used in the portal header and canvas app, as well as for SharePoint site and Power BI.

Logo text alone

This logo text alone can be used where the full logo is to big or when the resolution is too low and the text becomes unreadable.

Logo icon alone

The logo icon will be used as favicon in portals, as icon in Canvas Apps and as icon for DevOpsTeam.