Mobile Dev, Office365, Power Apps

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

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…

Mobile Dev, Office365, Power Apps

Badge printing and more with Power Apps

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!

UI, UX

Design, prototype, experience and share with Adobe XD CC

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.

Web development

Adobe Dreamweaver CC – October 2017 release

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.

Web development

Encoding space characters in jQuery ajax request

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.
Collaboration

Microsoft Teams has a new logo

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.

Web development

JS frameworks and libraries madness

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.