Mobile Dev, Office365, Power Apps

Badge printing with Power Apps – 2. Sending the print job to the printer

Posted on by iani

This is part of the series Badge printing and more with Power Apps

After choosing the printer the challenge was to send the print job to it. As explained in the previous post, the printer would be available only on local network, so there is no direct access from Internet to it. That’s why we had to establish a link between Power Apps (Microsoft 365) and the local IP address of our printer (on-premises network) and send the print job.

But how?

Let’s describe the process from the end to start:

  • The badge would be printed by the printer
    • the Brother printer understands ESC/P commands
      • containing the ESC/P commands, a file should be generated including the visitor information
        • the visitor information should be transferred to a local server by a Flow (Power Automate)
          • the Flow collects the visitor information from Power Apps App

Ok, now let’s start from the beginning like normal people 🙂

The Flow collects the visitor information from Power Apps App

This step is straightforward, one needs to create a Flow which will be called by the Power Apps app using parameters.
There is a template for that called “Power Apps button”. I recommend you this video about how to handle the parameters generated by “Ask in PowerApps”.

We are passing the following information from Power Apps: first name, last name and company name.

The visitor information should be transferred to a local server by a Flow (Power Automate)

In the Flow created in the previous step we need to add a new action and generate a .txt file and save it on a local server. Here comes the on-premises data gateway in action:

On-premises data gateway

Microsoft has that figured out and provides local access through the On-premises data gateway. The service was originally built for PowerBI (hence the service name PBIEgwService) but it can be used by the Power Platform products: Power Automate, Power Apps.

Be aware that the on-premises gateway is a premium feature and requires a premium license!

Installation and configuration

  • Installing the gateway
  • Signing in and configuring proxy (if needed) and service user
  • Test connectivity
  • Test if service is running

After that this new gateway should appear in the list in Power Automate Portal -> Data -> Gateways

Adding a new connection in Power Automate using the newly created Gateway

In order to generate and save a file on a local server we must create a new connection using the gateway.
This is done in Power Automate Portal -> Data -> Connections -> New Connection -> File System

Root folder is required and must a folder path (e.g. \MACHINE\myShare or C:\FolderName)
Authentication Type is “Windows”
Username is required and is the local username credential (e.g. DOMAIN\Username)
Password is required and is the local password credential
Gateway is required and is a selection of created gateways

Here is the official Microsoft documention about the File System Connector

Now we are able to add “Create File” operation using the Connection created above and specifying then path and the file contents.

In the next blog post from this series we will handle the ESC/P commands and converting the collected visitor information to a format that can be understood by the printer.

2
Mobile Dev, Office365, Power Apps

Badge printing with Power Apps – 1. Checking the printing requirements of the chosen printer

Posted on by iani

This is part of the series Badge printing and more with Power Apps

Introduction

I have been developing a visitor registration app for the company I work. Since we already have Office365 licenses and we are heavily using SharePoint, Teams and other Microsoft products, I thought, why not using Power Apps to build a kiosk mobile app which will run on a tablet in the office. Kiosk as in always on, just sitting in the office lobby. Secured with a lock of course, what did you think? 🙂
The big advantage of Power Apps is that the same app will be available for all the coworkers on web or on their mobile phones. Build once, run it everywhere…

Badge printing

Everything went well, the app was running and visitors were successfully checked in and out. But the killer feature was missing – badge printing. All the other important visitor management solutions offered this feature.

The chosen printer

After some research, I went with the Brother QL-820NWB

  • N stands for Network connection
  • W stands for Wireless connection
  • B for Bluetooth connection

The specifications were great, having all the connectivity options already available. Unfortunately with Power Apps you cannot use the native features of the device like Bluetooth connectivity to send a print job to the printer.

Brother provides quite an extensive documentation for developers and a SDK, which again, wasn’t useful in our case.

So I had to find a workaround to get the Power Apps app to communicate with the printer.

The solution was to use the ESC/P commands to send the template and the contents to the printer.
Perfect, the tablet the app was running on was connected to the office Wifi. The printer was connected to the same network via cable. The devices were sitting right next to each other. They should be getting along fine, right?
Wrong! 🙂 Because Power Apps runs in the cloud context (Office 365) and it doesn’t care about your local network.

So, I had to find the way to send the print job to the printer…

7
Mobile Dev, Office365, Power Apps

Badge printing and more with Power Apps

Posted on by iani

I have been procrastinating this for a long time now. The time has come to blog again. 🙄

Objective: Badge printing
Product: Power Apps – Office365

This will be a series of a couple of posts since there is a lot of info and I have been struggling a lot to make it work.
To start of, printing is not available by default in Power Apps. One must find a workaround and this is exactly what I did. And it works!

  1. Checking the printing requirements of the chosen printer
  2. Finding the way to send the print job to the printer
  3. Esc/P commands – a whole new (ASCII) world
  4. Testing, a lot of testing
  5. Voilà!

Stay tuned, the first article will be published soon!

0
UI, UX

Design, prototype, experience and share with Adobe XD CC

Posted on by iani

Adobe Experience Design came out of beta some days ago and it’s now named Adobe XD CC. One can prototype, design and share amazing user experiences for websites, mobile apps in the same app.

Looks really promising. Finished the first tutorial and it looks REALLY PROMISING! 🙂

Found out some nice tutorials and videos:

Yup, I will surely use this for the upcoming UI/UX prototyping.

0
Web development

Adobe Dreamweaver CC – October 2017 release

Posted on by iani

First of all, I must confess, I am a big fan of Adobe Creative Cloud!

Aside from the frequently used applications like Photoshop, Illustrator or the new Adobe XD (Experience Design) I went on and installed all the apps.

Yes, ALL of them 🙂

What, there is a new Lightroom CC app, BAM installed it!
Audition CC for music editing, I might need it, BAM installed it!
After Effects CC, but of course, BAM installed it!

Had second thoughts before clicking on Install next to the Adobe Dreamweaver CC because I never liked and used the product. Back in 2003-2004 when I spent my time mostly in Macromedia (Adobe) Flash I installed Macromedia Dreamweaver. Can’t remember exactly (maybe because I found it bloated) but abandoned it and switched to another IDE. Instead and I went on and used PHPDesigner (yes, you can laugh), NetBeans and Eclipse.

From then I always took a poor view of Dreamweaver and avoided it.

Until today when I opened the application and what strucked me was Visual Studio Code alike style and simplicity. Then I found out about some wonderful new features like the Quick Edit which saves time by editing inline code from a css linked file for example.

Using Emmet shortcuts or updating multiple lines of code all at once are also some awesome features. Plus Dreamweaver compiles and generates the files if you want to use CSS preprocessors like LESS or Sass.

Morevor, Git integration and pushing automatically the files to a FTP server.

This being said, I will try to use Dreamweaver as my main IDE in the following weeks to come.

0
Web development

Encoding space characters in jQuery ajax request

Posted on by iani

I’ve run into an issue as I was working on a URL shortening tool. Obviously, this tool works with links or URLs. Some URLs can be very messy, let’s take for example Microsoft Forms or files in nested folders in SharePoint Online.

Problem

As I was passing a long URL which contained ” ” space characters I’ve noticed that the jQuery.ajax function was encoding these characters to “+” (plus) sign and not the well known “%20”.  Read 2354 articles, including this very interesting one which states that “URL is still broken to this day”. The takeaway there is that when you encode the space characters you should follow this simple rule:

“You should have %20 before the ? and + after.“

Even when using encodeURI() function or simply replace() function the value passed was still encoded by jQuery converting the ” ” or “%20” to “+”.

Solution

But finally I found the solution and it was something very basic so that’s why I am sharing this with you. On the official jQuery.ajax() documentation in the list of settings, there is this “processData” which is by default true.

processData (default: true)
Type: Boolean
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOMDocument, or other non-processed data, set this option to false
Normally this is very useful because it processes the data passed but in my case it was messing up the data being sent.
1
Collaboration

Microsoft Teams has a new logo

Posted on by iani

LE: False alarm, it seems that was an old version. All good.

Microsoft Teams

As I was casually browsing the Office 365 app launcher I saw something new.
The Teams tile got a fresh new logo, it stands out from the standard Office Apps design.
But it looks similar to the Skype logo.
Well the name of the product is Microsoft Teams and not Office Teams.

Interesting to know if this is just temporary.

0
Web development

JS frameworks and libraries madness

Posted on by iani

Lots have been changing lately in the front-end development scene. New JS frameworks  and libraries appearing, great support and pathos for the already industry recognized ones  lead to a very complicated answer about which is the best one.

But there is no such thing as the best one. One should choose the best which fits to the requirements. In order to do that, one must know and test the frameworks/libraries.

I’ve been playing with AngularJS in the past but in the following weeks I am going to test more Angular, Ember, React, Backbone, Ractive.js and some others.
A very good starting point is the TodoMVC  project which showcases a simple Todo application implemented using the most popular MV* frameworks of today.

0