David Nissimoff's blog

Reusable PowerApps Control Templates

David Nissimoff — Wed, 25 Apr 2018 12:37:10 GMT

Does PowerApps support control templates? For example, imagine I am a company and I want a standard header or footer in all PowerApps that my employees make. Or perhaps I built some non-trivial piece of functionality like a calendar view that I want to use in many apps. Can I avoid duplicated effort? So far there have been a few partial solutions or workarounds for this. PowerApps recently added support for copy / paste operations across tabs in PowerApps Web Studio which enables you to open an app, copy controls, then paste onto a new app. This blog post introduces a tool I wrote to make it easier to share portions of an app. I refer to these as control templates.

Here it is: https://patemplates.azurewebsites.net/

Using a template

Say you want to add a calendar view like the one from my previous blog post here. I created a template for it, so now you can do it in 3 easy steps:

Open the template: https://patemplates.azurewebsites.net/templates/4b77bfd8-811e-4a41-88d3-c129b96f2d2d
When the page loads, press Ctrl+C (copy). The template is now copied to your clipboard
In your app in Web Studio, press Ctrl+V (paste)

That's it! Compare this to having to either reproduce each step in that blog post, or having to download the sample app, copying several controls and formulas, etc.

Creating a template

Creating your own template is just as easy.

In Web Studio, select the controls you want to templatize and press Ctrl+C (copy)
Open https://patemplates.azurewebsites.net and press Ctrl+V (paste)
Done! You will get a link to your new template.

Note: your template will be stored and made available publicly to anyone who has the link. You should always assume any templates you create are public -- do not use this if you have sensitive information in your formulas.

Nice and easy. There are, however, limitations:

Data sources are not copied. If you copy controls that access external data, you will have to set up the data sources in order to use the templates correctly
Media are not copied. If your template includes an image / video / audio control with media that was embedded on your app, the media will not be part of the template
You may have to recreate your templates from time to time as PowerApps releases new versions. If you start seeing issues, just open the app that has the controls you care about, and create a new template from them.
Only Edge and Chrome are supported.

You might see warning signs on some formulas until you manually fix any issues caused by the above.

Wrapping up

I built this tool for myself as a PowerApps blog author -- now I can more easily share content for the community to consume. I hope that by sharing this tool others will also benefit. It should be obvious that this tool is not an official Microsoft product. While I intend to do my best to keep it running and operational, you shouldn't expect the same level of polish and reliability as PowerApps itself. What do you think? Share your thoughts or feedback below!

Building a calculator in PowerApps (that can do 1 + 2 + 3)

David Nissimoff — Mon, 13 Nov 2017 01:14:33 GMT

Given the recent news coverage of a remarkable bug in a very popular calculator app on a very popular mobile device ([1], [2], [3]), the question came up of how hard would it be to build a simple calculator using PowerApps. This article presents what I came up with. Obviously this is a gimmick more than anything else. But perhaps you can learn a thing or two from it. This calculator can behave in funny (but explainable) ways for numbers that are too large or too close to zero, and I am deliberately not attempting to handle such cases in order to keep things simple. This is not meant to replace a proper calculator, and as-is it can compute 1 + 2 + 3 = 6, so there you have it :) Download sample app (make sure to save with .msapp extension)

How it works

The operation of the calculator is defined by 4 context variables (to learn more about context variables, go here).

_val: result of the latest computation
_operator: what mathematical operation are we currently performing. Can be "+", "-", "*", "/" representing the four basic mathematical operations. It can also be "#", representing number entry when no operations have been applied yet.
_operand: the number to the right of the current operation. For example, when computing 1 + 2 = ?, _operand corresponds to the number "2".
_decimal: current number of decimal places. Helps take care of entering numbers with decimal points

The initial state

We start by setting all variables to their initial values. We do this on the screen OnVisible, and also on the Clear button's OnSelect:

UpdateContext({_val:0,_operator:"",_operand:0,_decimal:0})

Number entry

Each time a digit 0-9 is pressed, we update the value of _operand to include the new digit. Forgetting about decimal points for a moment, the logic for integers is quite simple: we multiply the number we already have by 10, and then add the new digit. A little care is needed when a user is entering a negative number (which they can by using the "+/-" button. In that case, we need to subtract the digit that was pressed instead of adding it. Taking care of decimal points is slitghly more challenging, but not too much. We keep track of the number of decimal places already entered with the variable _decimal. When the "." button is pressed, we set _decimal to 1. After every key press of 0-9 after this, we update _operand by adding (or subtrating if the number is negative, as mentioned above) 10^(-_decimal)*DIGIT_PRESSED, where DIGIT_PRESSED is just the number of the button that was pressed (0 - 9). Here is the formula for button 5's OnSelect:

UpdateContext({
  _operand: If(_decimal>0,_operand+If(_operand<0,-1,1)*10^-_decimal*5, _operand*10+If(_operand<0,-1,1)*5),
  _decimal: If(_decimal>0, _decimal+1, 0),
  _operator: If(IsBlank(_operator), "#", _operator)
})

The four mathematical operations

The logic for each of the mathematical operations can be described as a sequence of two steps:

Update _val with the result of the previous mathematical operation
Prepare for the next mathematical operation

The first part is taken care of as follows:

UpdateContext({_val:If(_operator="#", _operand,
                       _operator="+", _val+_operand,
                       _operator="-", _val-_operand,
                       _operator="*", _val*_operand,
                       _operator="/", _val/_operand,
                       _val)})

The way to read that is like this:

If _operator is "#", we set _val to the current value of _operand (i.e. we store the initial number entered by the user).
If _operator is "+", "-", "*", "/", we apply the corresponding operation between _val and _operand, and store the result in _val.
Otherwise, we leave _val untouched. This can happen if a user pressed any of the mathematical operations or the equals sign before entering any numbers.

The second step, preparing for the next mathematical operation, is simply a matter of clearing the variables _operand and _decimal, and setting the new _operator as appropriate:

UpdateContext({_operand:0,
               _decimal:0,
               _operator:"+"})

The "Equals" button follows a similar logic, but sets _operator to "" (empty string, so that the next time a number is entered, it will replace _val).

The Percentage button

The percentage button works by updating _operand to be a percentage of the current _val. Nice and easy:

UpdateContext({_operand:_val*_operand/100})

Number display

Perhaps the most challenging aspect of the implementation was the logic to display the right thing as the large numbers. In some cases, we want to show the result _val. In others, we want to show the _operand as it is being entered. Thanks to the use of the pseudo-operator "#", this is what I ended up with. The big numbers:

lblDisplay.Text = Round(If(IsBlank(_operator) || _operand=0, _val, _operand),6)

And the smaller text above the large numbers, that indicates the current operation:

lblOperation.Text =
If(_operator = "#", Round(_operand,3) & "",
   !IsBlank(_operator), Round(_val,3) & " " & _operator & " " & Round(_operand,3),
   Round(_val,3))

Wrapping up

That's it for the calculator. Another aspect worth mentioning is the use of dynamic layout for the buttons. I configured the buttons so that the spacings between each button and the screen borders are all the same, and the buttons resize themselves to fill up the space available. There are many ways to achieve this. Here's what I used:

The X position of the top-left button ("Clear") defines all the spacings. If I drag it all the way to the left, there will be zero spacing between the buttons. If I make X = 5, there will be 5 units of spacing between all elements.
The Y position of the top-left button ("Clear") dictates the vertical positioning of all elements.

Formulas on the X, Y, Width and Height of all other buttons are used to adjust to the X and Y where I place the top-left button. This choice allows we to very easily manipulate the calculator layout by simply moving the "Clear" button, and everything else falls into place. Comping up with the right expressions to make this work can be tricky, and drawing things out on a piece of paper first can help. An example of the freedom this provides is shown below, where I am simply moving the "Clear" button and everything else follows from it. And that's the end of this post. Let me know if you have questions or suggestions for future posts, and I'll see you next time.

Using Fiddler to simulate AAD failures with ADAL.js

David Nissimoff — Thu, 06 Jul 2017 21:36:37 GMT

Authentication can be hard. Getting your error handling logic right can be especially hard if you cannot easily reproduce the error conditions that one needs to handle. This article provides some background on the Implicit Grant flow with Azure Active Directory (AAD) as supported by ADAL.js, then shows how to use Fiddler to simulate various error conditions.

Scope of this article

Microsoft offers a set of libraries for dealing with identity in the cloud with AAD (Azure Active Directory), supporting various authentication flows such as OAuth 2 Authentication Code or OAuth 2 Implicit Grant flows. This article is meant exclusively for the latter (Implicit Grant flow), where a web application obtains access tokens directly from AAD without requiring intermediate servers to process any responses. In this case, we are using the ADAL.js library. This article is not going to talk about how to use or configure ADAL.js. There are several other sources of information about those. Instead, my focus will be on how to test your application for some of the common AAD errors you or your users might encounter to make sure that you can properly detect and react to them.

Background

The Implicit Grant flow is commonly used for authentication in modern Single Page Web Applications (SPA). Microsoft Teams and Microsoft PowerApps Studio for Web are examples of products that use AAD Implicit Grant for authentication at the time of this writing. Access tokens are obtained by pointing a browser window (or iframe) to an AAD endpoint and specifying details of the request as query parameters. Under the right circumstances, AAD will respond with an HTTP 302 (Redirect) status code, causing the window (or iframe) to navigate to the specified redirect_uri and the desired access token will be available in the fragment (that is, after a '#' character in the destination uri). Example flow:

To obtain an access token, ADAL.js creates an iframe pointed at:

https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=12345678-90ab-cdef-1234-567890abcdef&resource=https%3A%2F%2Fsome.resource.example.com%2F&redirect_uri=https%3A%2F%2Fmysite.example.com%2Fauthframe&state=fedcba98-7654-3210-fedc-ba9876543210%7Chttps%3A%2F%2Fsome.resource.example.com%2F

On success, AAD responds as follows:

HTTP/1.1 302 Redirect
Location: https://mysite.example.com/authframe#access_token=eyJmYWtlIjp0cnVlfQ.eyJmYWtlIjp0cnVlfQ.eyJmYWtlIjp0cnVlfQ&token_type=Bearer&expires_in=3599&state=fedcba98-7654-3210-fedc-ba9876543210%7Chttps%3A%2F%2Fsome.resource.example.com%2F

When things go wrong

Several things can go wrong in this flow. Some causes are due to code or configuration defects. You, as the developer, are supposed to fix any such issues yourself, hopefully before your users encounter them. Other failures, however, can happen at run-time depending on user access policies and browser settings. A robust web application must be able to detect and react to these. Here are some examples of responses you should expect.

If the user is not signed in (e.g. cleared browser cookies), AAD might respond as follows:

HTTP/1.1 302 Redirect
Location: https://mysite.example.com/authframe#error=login_required&error_description=AADSTS50058%3a+A+silent+sign-in+request+was+sent+but+no+user+is+signed+in.+The+cookies+used+to+represent+the+user%27s+session+were+not+sent+in+the+request+to+Azure+AD.+This+can+happen+if+the+user+is+using+Internet+Explorer+or+Edge%2c+and+the+web+app+sending+the+silent+sign-in+request+is+in+different+IE+security+zone+than+the+Azure+AD+endpoint+(login.microsoftonline.com).%0d%0aTrace+ID%3a+00112233-4455-6677-8899-aabbccddeeff%0d%0aCorrelation+ID%3a+ffeeddcc-bbaa-9988-7766-554433221100%0d%0aTimestamp%3a+2017-07-07+04%3a30%3a00Z&state=fedcba98-7654-3210-fedc-ba9876543210%7Chttps%3A%2F%2Fsome.resource.example.com%2F

If the desired resource requires multi-factor auth (MFA), but the user has not gone through MFA yet, AAD might respond as follows:

HTTP/1.1 302 Redirect
Location: https://mysite.example.com/authframe#error=interaction_required&error_description=AADSTS50076%3A+Due+to+a+configuration+change+made+by+your+administrator%2C+or+because+you+moved+to+a+new+location%2C+you+must+use+multi-factor+authentication+to+access+'01122334-4556-6778-899a-abbccddeeff0'.%0D%0ATrace+ID%3A+00112233-4455-6677-8899-aabbccddeeff%0D%0ACorrelation+ID%3A+ffeeddcc-bbaa-9988-7766-554433221100%0D%0ATimestamp%3A+2017-07-07+04%3A30%3A00Z&state=fedcba98-7654-3210-fedc-ba9876543210%7Chttps%3A%2F%2Fsome.resource.example.com%2F

If you specify a redirect_uri that is not registered with AAD, AAD will refuse to follow it, so you will not get the usual HTTP 302 (Redirect) response. Instead, AAD will return 200 (OK) with HTML content that would show an error to the user, including a human-readable error message that indicates you have an invalid redirect_uri. In ADAL.js, errors such as this are usually identified as a timeout (i.e., ADAL.js was waiting for the page to be redirected to the redirect_uri, but this doesn't happen and after a few seconds ADAL.js gives up). Look for the constant LOADFRAME_TIMEOUT in the ADAL.js source code for more info.

Simulating failures with Fiddler

If you paid attention to the examples above, you may have noticed that each of the responses includes the same state value as was passed on the request from the browser. It is critical to make the simulated response behave the same way. We will leverage Fiddler's FiddlerScript for this.

Ensure you have a recent version of Fiddler installed and that it is configured to decrypt HTTPS traffic.
Note: There are security implications to doing this. Make sure you are comfortable with the potential risks involved, some of which are described here.
On the right panel, select the FiddlerScript tab

Find the OnBeforeRequest method definition and add the following at the end of the method body:

if (1 &&
    oSession.oRequest.host == "login.microsoftonline.com" &&
    oSession.HTTPMethodIs("GET")) {
    var url = oSession.fullUrl;
    var end = url.Length;
    var qmark = url.IndexOf("?");
    var qparams = {};
    if (qmark >= 0) {
        var query = url.Substring(qmark + 1, end - qmark - 2);
        qparams = Utilities.ParseQueryString(query);
    }
    if (qparams["response_type"] === "token") {
        oSession["ui-color"] = "purple"; // Visually indicate this request was modified
        oSession["ui-backcolor"] = "cyan";
        oSession.utilCreateResponseAndBypassServer();
        var newLocation = qparams["redirect_uri"] + "#error=login_required&error_description=Simulated+aad+error&state=" + Utilities.UrlEncode(qparams["state"]);
        oSession.responseCode = 302;
        oSession.oResponse.headers.Add("Location", newLocation);
    }
}

To easily enable or disable this code, simply change if (1 && on the first line to if (0 &&.
When Fiddler is capturing, any web applications that attempts to acquire tokens using AAD's Implicit Grant Flow will now experience the simulated error. You can easily add additional checks to only intercept requests meant for your AAD app client_id. The variable qparams above is your friend.

Wrapping up

That's it for now. I hope this helps some people out there test their applications and ensure they can handle these kinds of errors gracefully. Let me know if you have comments or suggestions and I will try to address them. See you next time!

Scatter plots in PowerApps using a Gallery control

David Nissimoff — Thu, 25 May 2017 15:05:35 GMT

This article will show you how you can build custom data visualizations in PowerApps using only two controls: a Gallery, and a Circle. While PowerApps already supports Column charts, Line charts and Pie charts out of the box, there is currently no built-in way to render scatter plots. Note that the idea presented here is only useful if you have small amounts of data. This is not a replacement for more advanced data visualization tools such as the ones that exist with Power BI. Download sample app

How it works

The trick is to use a vertical Gallery with a very small TemplateSize. The gallery template will have a single Circle control, whose X, Y, Width, Height, and Fill will be bound to fields of a data source. The Gallery works by replicating its template for as many items as exists in the data source it is bound to, so if we have some data with a few entries, we will get one circle for each entry. In addition, PowerApps ensures gallery items that extend beyond the template size are not clipped and will render correctly even if TempalteSize is much smaller than the circles. So, are we all set? Well, almost. If we could set the TemplateSize to 0, we would be done. However, the minimum value allowed in PowerApps is TemplateSize=1. This means that each replicated circle will be one pixel below the one before it, and the circles would not render at exactly the right place. We can easily fix that by having each item in the gallery have a field with the item index in the gallery, and offset the circle's Y position accordingly to compensate for the gallery TemplateSize.

Formula time

Here's how we add items to the data source (it is just a collection in this case). Note that we are using context variables minRadius and maxRadius just to make it easier to change those values in the sample. You could hard code them or get them from somewhere else instead just as easily.

UpdateContext({minRadius:10, maxRadius:30});
Collect(Bubbles,
  {
    index: CountRows(Bubbles),
    x: Rand() * (Gallery1.Width - maxRadius*2) + maxRadius,
    y: Rand() * (Gallery1.Height - maxRadius*2) + maxRadius,
    radius: Rand() * (maxRadius-minRadius) + minRadius,
    color: RGBA(Rand() * 255, Rand() * 255, 0, 1)
  })

And here's how the circle in the gallery template is configured.

Circle1.X      = ThisItem.x-ThisItem.radius
Circle1.Y      = ThisItem.y-ThisItem.radius-ThisItem.index*Gallery1.TemplateHeight
Circle1.Width  = ThisItem.radius*2
Circle1.Height = ThisItem.radius*2
Circle1.Fill   = ThisItem.color

Wrapping up

And that's it for now. Now you know how to leverage a Gallery control to do more than just show rows of data. The possibilities are endless, but remember that this is not exactly the scenario that Galleries were designed and optimized for, so always try to use the built-in data visualization controls when possible and send us feedback of what you're trying to build and what would make things easier for you. See you next time!

PS: This article was inspired by a question in the PowerApps forums. Thanks JohnP for the questions and keep them coming!

Text conversion power tool for Visual Studio Code - Inception

David Nissimoff — Tue, 21 Feb 2017 23:50:34 GMT

Last week I finally wrote a tool that I had been meaning to write for some time. Inception is an extension for Visual Studio Code that helps developers extract information contained in text with simple keystrokes and few clicks. Get it here: https://marketplace.visualstudio.com/items?itemName=davidni.inception Source code: https://github.com/davidni/vscode-inception

What does it do?

Inception contributes a new command to VS Code which examines selected text and tries to guess what it is, then provides useful outputs for common things you may want to do with it. For example:

Select a base64-encoded string, press Ctrl+F1 (Cmd+F1 on Mac) and see the decoded data
Select a URL-encoded string, press Ctrl+F1 (Cmd+F1 on Mac) and see the decoded data
Select a URL, press Ctrl+F1 (Cmd+F1 on Mac) and see its query and hash parameters nicely decoded
Select a JSON string, press Ctrl+F1 (Cmd+F1 on Mac) and see the prettified data
Select a UNIX timestamp, press Ctrl+F1 (Cmd+F1 on Mac) and see the decoded date/time in your time-zone as well as in UTC.
Select a JWT token, press Ctrl+F1 (Cmd+F1 on Mac) and see its base64 parts nicely separated and identified.
etc.

No more copying / pasting text around into separate converters and tools. No more learning how to use different tools for simple conversion operations. No more risking using online tools that could be stealing your data. This has proven to be useful for my own workflows and perhaps others can benefit from it or contribute support for more encodings. It is fully open source and contributions are very welcome.

Advanced PowerApps visualizations with dynamic SVG’s

David Nissimoff — Sun, 08 Jan 2017 03:57:45 GMT

PowerApps brings you lots of built-in controls and ways to visualize your data with just a few clicks. Sometimes, however, you might want to build custom visualizations that are not quite achievable with only those controls. This article shows one way in which you can create your own custom visualizations. In particular, we will create a radial gauge (circular progress bar) using only an Image control. This is not for the faint of heart, however. Proceed at your own risk :)

Get the template (open the link, press Ctrl+C, then paste onto your app)
Download sample app

NOTE: The technique explained in this article is not officially supported by the product, nor is it easy or friendly to use. You should prefer other supported alternatives when possible. That said, if nothing else suits your needs and this allows you to build the amazing PowerApp you want, then by all means go for it and have fun! I have tested it to ensure that it currently works in all our supported platforms as of this writing.

Some background

We use 2 key concepts to achieve our goals in this article:

Data-uris: this is a standardized way of expressing small data items in the form of a URL. The PowerApps Image control accepts URL’s to specify an image, and we will use this special type of URL to define an image inline.
SVG's: Scalable Vector Graphics are becoming the de-facto way to represent vector graphics. It is very convenient in our case because SVG is an XML-based format, so it can be expressed in plain-text.

The idea: Write a PowerApps expression that results in some text which will be the data-uri representation of an SVG image. By setting this expression as the Image property of an Image control, we can dynamically render the SVG content, which can take any valid PowerApps constructs as input. The sample app shows a radial gauge representation that is controlled by a Slider control. Of course, you can create any other visualization with the same approach.

The magic expression

"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E" &
    "%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
        "M%20" &
        Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
        "%20A%20" &
        "40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4)) & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4)) &
        "%22%3E" &
    "%3C%2Fpath%3E" &
    "%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
        "M%20" &
        Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
        "%20A%20" &
        "40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4)),"1","0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
        "%22%3E" &
    "%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

You can change the look and feel by looking for the following chunks in the given expression and changing the values of all occurrences to something else. If you change any one of these, make sure you find and replace all occurrences, otherwise things may not work.

stroke%3Argb%28230%2C230%2C230%29: URL-encoded value of the light-gray radial background color. In this example, the R, G and B components all have value 230
stroke%3Argb%2869%2C204%2C206%29: URL-encoded value of the blue radial indicator color. In this example, R=69, G=204, B=206.
stroke-width%3A18: Controls the thickness of the indicator background and foreground. For this example they are both the same (18), but you can change them independently if desired.
Slider1.Value/Slider1.Max: The PowerApps expression giving a value from 0 to 1 for the value you want to show in the visualization. In this case we use the position of Slider1 to control it.
Pi()/4: controls where the radial indicator starts at the bottom in radians. As you increase this, the spacing at the bottom increases too (see image below -- make sure this is never greater than Pi [180 degrees]).

A note on image resizing

Since we are using SVG, the image can be rendered at any resolution without looking blurry. You can resize the Image control to any size you want (just make sure the property ‘ImagePosition’ is set to ‘Fit’) and it will scale as appropriate.

Troubleshooting

A single character error could prevent this from working, in which case you would get a blank image and no indication of what might be wrong. Should that happen, a helpful tip is to add a TextBox to your app and set its Text property to Image1.Image. This will show you the result of evaluating your expression, and might help you find what’s wrong. For the sample app and when the slider is exactly in the center, this is what it should look like:

NOTE: If you are using Chrome, you can copy the string below and paste it in the address bar of your browser and you will see the radial gauge come up. Browsers too can read data uri's!

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22M%2021.71572875%2078.28427125%20A%2040%2040%200%201%201%2078.28427125%2078.28427125%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22M%2021.71572875%2078.28427125%20A%2040%2040%200%200%201%2050.0%2010%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E

When URL-decoded and formatted, you can see what the SVG content looks like:

Wrapping up

And that's it for now. I mentioned in the beginning that this was not for the faint of heart, and now you can probably see why. In any case, this opens up many interesting scenarios if you are willing to have some not-very-pretty expressions in your app. What's more, whoever is using your app (perhaps yourself!) won't know about the expressions that are powering the visualization. All they will see is the beautiful UI that you were able to create thanks to PowerApps. See you next time!

PS: This article was inspired by a question in the PowerApps forums. Thanks nagavital for the questions and keep them coming!

Building an interactive calendar view with PowerApps

David Nissimoff — Tue, 13 Dec 2016 02:46:20 GMT

PowerApps has many built-in facilities to help you work with dates and calendars (click these links to learn more about the DatePicker control and the Date and DateTime functions 1, 2, 3). For some scenarios, however, you might want to customize the look and feel of those experiences beyond what is available out of the box. This article will walk you through the creation of an app with a customized calendar that shows a month view, highlights special days (holidays and weekends) and allows for interactive date range selection by tapping. Here is what it will look like:

Get the template (open the link, press Ctrl+C, then paste onto your app)
Download the sample app (you will need PowerApps - get started at https://powerapps.microsoft.com)

Since this example uses only built-in PowerApps controls such as TextBoxes, Circles, Rectangles and Galleries, you can take this further and customize it in endless ways for your own needs. Even if you have no interest in building a calendar control, this article can still help you learn a little bit more about PowerApps:

Using Galleries and the WrapCount property
How to find the control you want when your app has several on top of each other
Using context variables
Tricks for improving your app’s performance

Introduction and strategy

Let’s outline the plan before we start executing it. The main piece of this calendar control will be a Gallery, where each gallery item is a day in the month. The gallery template will need a TextBox to show the day number (1 – 31), and a Circle behind the text to show if that day is special (holidays will show a purple circle; selected days will show a blue circle). We will add other controls as we go. Some calendar math: Note that we need up to 6 weeks to fit all possible months. The extreme case is a 31-day month that starts on the last day of the week (look at July 2017 for example). For our purposes, we will always show 6 weeks in our view, even if a month could fit in fewer (5 or 4) weeks. This is done for multiple reasons:

Our calendar will always occupy the same screen space regardless of the selected month. You won’t need to worry about adapting the rest of your app UI for months that take up more or less weeks
It is consistent with the Windows 10 Clock / calendar control (click the clock on your system tray and navigate between July/2017 to August/2017 to see this in action)
It is easier to build

Win-win-win (that said, you can change this behavior if you want since, again, we are using only PowerApps primitive controls). We also need the Left / Right arrows to switch months, and they must do something that will affect the gallery. We will use Context Variables for this. Finally, we want to be able to select dates by tapping on them. Remember that all controls in PowerApps have an OnSelect action that is executed when the control is tapped, and we will use the OnSelect action of the TextBox to update some Context Variables in this case.

Before we begin – A trick for selecting controls

To select a specific control, a very convenient way is to use the “Advanced” pane on the right-hand side:

To select a top-level control, select it from the drop-down indicated above
To select a control that is inside a gallery, first select the gallery, then click the drop-down again and you will see all controls that exist within the gallery listed below a divider line. At the end of this exercise, you will have something like this:

Initialization

Select your screen, click on "Action" on the ribbon --> "On visible". Paste the expression below in the formula bar. This is setting up some context variables that we will use next. [LOCALE NOTICE] Depending on the regional settings of your device, you may have to adjust the formulas provided on this blog post slightly. You may have to replace all semicolons (;) with double semicolons (;;), and all commas (,) with semicolons (;). Learn more about Languages and globalization in PowerApps.

Screen1.OnVisible =
If(!_initialized,
  UpdateContext({_today:Today()});
  UpdateContext({_firstDayOfMonth:DateAdd(_today,1-Day(_today),Days)});
  UpdateContext({_firstDayInView:DateAdd(_firstDayOfMonth,-(Mod(Weekday(_firstDayOfMonth)-2,7)+1),Days)});
  UpdateContext({_holidays:Table({HolidayDate:Date(2016,12,25)},
                                 {HolidayDate:Date(2017,1,1)},
                                 {HolidayDate:Date(2017,1,16)},
                                 {HolidayDate:Date(2017,2,20)},
                                 {HolidayDate:Date(2017,5,29)},
                                 {HolidayDate:Date(2017,7,4)},
                                 {HolidayDate:Date(2017,9,4)},
                                 {HolidayDate:Date(2017,11,23)},
                                 {HolidayDate:Date(2017,11,24)},
                                 {HolidayDate:Date(2017,12,25)}
                                )
                });
  UpdateContext({_initialized:true})
)

Note: I am using names with a leading underscore like _this for context variables to distinguish them from other entities in PowerApps such as control names and collections. You don’t have to do this, but it helps keep things organized.

_firstDayOfMonth will have a Date corresponding to the first day of the current month. We do this by taking today’s date, and subtracting (current day - 1) or, equivalently, adding –(current day – 1) = (1-current day). For example, if today were February 7^th, we would do (February 7^th) + (1 - 7) = (February 7^th) – 6 = February 1^st.
_firstDayInView is a little bit trickier. It represents the first day that shows up at the top left of the gallery, which is the first Sunday before _firstDayOfMonth. We leverage the function Weekday to do this, which returns a number from 1 (Sunday) to 7 (Saturday) for the given date. We then do some math and use the Mod function, which gives the remainder of a number by a divisor (7 in this case because a week has 7 days).
_holidays is a list of records, where each record has a single field called HolidayDate and whose value is the date of a holiday. You could also pull this data from an external connection using Custom API’s, or embed an Excel data source to achieve the same. Set the holidays that are meaningful to your business and / or your country by modifying this list.
_initialized is a variable that indicates whether initialization was already done or not. This helps the user experience if your app involves navigating between Screens. When your user comes back to this screen, they will see things as they left them thanks to this context variable. If you prefer to reset everything each time a user navigates to your screen, you can remove this variable and the If check at the top.

Making the initialization formula execute

Because you typed the OnVisible expression just now, it is ready to be executed when you navigate to this screen, but you need to do that at least once or it won’t have run. You only need to do this now because your OnVisible expression wasn’t there when PowerApps first showed your screen. From now on, if you save your app and open it again (or share with your colleagues), the OnVisible formula will execute as soon as your app starts, so you won’t have to do this again. To force this to run now, do this:

Add another screen to your app (click "Insert" on the ribbon --> "New screen").
Navigate back to the first screen by clicking on it on the left side.
Delete the new screen you just added. It has now served its purpose.

The main gallery

Back in your first Screen, add a Vertical Gallery and rename it to CalendarGallery:

CalendarGallery.TemplateSize = 50
CalendarGallery.Items =
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
 10,11,12,13,14,15,16,17,18,19,
 20,21,22,23,24,25,26,27,28,29,
 30,31,32,33,34,35,36,37,38,39,
 40,41]
CalendarGallery.WrapCount = 7

Add a TextBox inside CalendarGallery (make sure to select the gallery template first, then add the TextBox). Rename it to TextDay.

TextDay.Text = Day(DateAdd(_firstDayInView,ThisItem.Value,Days))

At this point you should be seeing something like this:

Switching months

Add Back and Next icons outside the gallery (click "Insert" in the ribbon --> "Icon") and place them above the gallery. Name them BtnBack and BtnNext

BtnBack.OnSelect =
UpdateContext({_firstDayOfMonth:DateAdd(_firstDayOfMonth,-1,Months)});
UpdateContext({_firstDayInView:DateAdd(_firstDayOfMonth,-(Mod(Weekday(_firstDayOfMonth)-2,7)+1),Days)})

BtnNext.OnSelect =
UpdateContext({_firstDayOfMonth:DateAdd(_firstDayOfMonth,1,Months)});
UpdateContext({_firstDayInView:DateAdd(_firstDayOfMonth,-(Mod(Weekday(_firstDayOfMonth)-2,7)+1),Days)})

Notice that the second line of each formula is the same as what we did during OnVisible Given the first day of the newly selected month, this will calculate what is the first Sunday before it.

Showing the current month

Add a TextBox, rename it to CurrentMonthName and place it between the back / next buttons that you added above.

CurrentMonthName.Text = Text(_firstDayOfMonth,"mmmm yyyy")

Showing the weekday header (Sunday, Monday, Tuesday, …)

Add a Horizontal Gallery , make it about 60 pixels tall and as wide as your CalendarGallery. Name it HeadersGallery and place it just above CalendarGallery.

HeadersGallery.Items           = ["S","M","T","W","T","F","S"]
HeadersGallery.TemplatePadding = CalendarGallery.TemplatePadding
HeadersGallery.TemplateSize    = CalendarGallery.TemplateWidth
HeadersGallery.Fill            = RGBA(0, 0, 0, 0.1)

Add a TextBox inside the new gallery and name it WeekDayHeader.

WeekDayHeader.Text       = ThisItem.Value
WeekDayHeader.Align      = Center
WeekDayHeader.FontWeight = Bold

At this point you should have something like this:

Showing holidays

Select the CalendarGallery template by clicking on the first item of this gallery
Add a circle ("Insert" in the ribbon --> "Icons" --> "Circle") and rename it to HolidayCircle

HolidayCircle.Visible = DateAdd(_firstDayInView,ThisItem.Value,Days) in _holidays

HolidayCircle.Fill =
ColorFade(
    RGBA(192,0,160,1),
    If( Month(DateAdd(_firstDayInView,ThisItem.Value,Days))=Month(_firstDayOfMonth),
        0,
        80%)
)

The Fill formula deserves some further consideration. This is adjusting the color of the circle depending on whether the day is part of the current month or not (ColorFade is a function that transforms a color. It makes things lighter if you pass a positive value and darker if you pass a negative value: 100% would make it white, and -100% would make it black. We are using 80%, which will make the purple lighter but still visible). Here is what you should see now if you go to January 2017. Notice how December 25^th 2016 has a light purple circle, because it is a holiday but not in the current month. Also, note that the dark text is hard to read on top of the purple circle. We will fix that next.

Adjusting the text color for better contrast

Select the TextBox TextDay by clicking on the first item of the main gallery. Then set this formula:

TextDay.Color =
ColorFade(
    If( HolidayCircle.Visible,
        RGBA(255,255,255,1),
        RGBA(47,41,43,1)),
    If( Month(DateAdd(_firstDayInView,ThisItem.Value,Days))=Month(_firstDayOfMonth),
        0,
        80%)
)

This is similar to what we did for the HolidayCircle fill, except that now we are controlling 2 things at the same time:

The color is white if the day is a holiday and dark otherwise
We make it 80% lighter if the day is not in the currently selected month. This is how we make days that are not in the current month appear dimmed, as shown below:

Hopefully you would agree that this is starting to look much better.

Allowing date range selection by tapping - Strategy

Here is the behavior we want to build:

Clicking on a date selects it
Clicking on a date after having selected another date, selects the range between those 2 dates
Clicking an already-selected day clears the selection

This is an intuitive model that your users will be able to quickly understand by clicking around and exploring your app. Here is the strategy that we will use to build this:

3 new context variables:
- _selectedCount: number of clicks in the selection. It starts at zero, goes to 1 when a day is selected, goes to 2 if another day is selected and back to 0 when the range is cleared
- _selectionStart: The date in the selection (the selected range is FROM this value)
- _selectionEnd: The last date in the selection (the selected range is UP TO AND INCLUDING this value)
One new circle in the gallery to show selections
New OnSelect formula on the TextDay TextBox to update the new context variables

Adding the OnSelect formula to handle taps

Select the TextBox TextDay by clicking on the first item of the main gallery. Then set this formula:

TextDay.OnSelect =
If( Month(DateAdd(_firstDayInView,ThisItem.Value,Days))<>Month(_firstDayOfMonth),
    0,

    _selectedCount > 0
    && DateAdd(_firstDayInView,ThisItem.Value,Days) >= _selectionStart
    && DateAdd(_firstDayInView,ThisItem.Value,Days) <= _selectionEnd,
    UpdateContext({_selectedCount: 0}),

    _selectedCount = 1,
    UpdateContext({_selectionStart: Min(_selectionStart, DateAdd(_firstDayInView,ThisItem.Value,Days)),
                   _selectionEnd:   Max(_selectionStart, DateAdd(_firstDayInView,ThisItem.Value,Days)),
                   _selectedCount:  2}),

    UpdateContext({_selectionStart: DateAdd(_firstDayInView,ThisItem.Value,Days),
                   _selectionEnd:   DateAdd(_firstDayInView,ThisItem.Value,Days),
                   _selectedCount:  1}))

Let’s go through this in pieces. We first check if the current day is in the current month. If it isn’t, we simply say 0 and do nothing. The return value of an action formula such as OnSelect is irrelevant, and we are using 0 just because it is the shortest syntactically valid option. Otherwise (i.e. the clicked day is in the current month), then we go through a series of conditions:

Is the clicked date part of a current selection range? We see if there is a selection (_selectedCount > 0) and the clicked date is at or after the beginning of the range and at or before the end of the range. If so, we clear the selection (UpdateContext({_selectedCount: 0}))
Was a single day already selected? We check this via _selectedCount=1. If so, we update the start to be the lesser of the clicked date and the previously selected date, and similary set the end of the selection to be the greater of the two. We also update _selectedCount to 2, indicating that a range of multiple dates is selected.

If none of the above (i.e. the clicked day is in the current month and it is not part of a selection), then set the current day as the only selected date.

Showing the current selection

We have everything in place to select dates and ranges, but we aren’t showing it to your users yet. Let’s address that that now.

Select the CalendarGallery template by clicking on the first item of this gallery
Add a circle ("Insert" in the ribbon --> "Icons" --> "Circle") and rename it to DaySelectedCircle

DaySelectedCircle.Visible =
_selectedCount > 0
&& DateAdd(_firstDayInView,ThisItem.Value,Days) >= _selectionStart
&& DateAdd(_firstDayInView,ThisItem.Value,Days) <= _selectionEnd

DaySelectedCircle.Fill =
ColorFade(
    RGBA(48,128,255,1),
    If( Month(DateAdd(_firstDayInView,ThisItem.Value,Days))=Month(_firstDayOfMonth),
        0,
        80%)
)

Here is what you should see at this point if you select a date range. Notice that again the dark text is hard to read on top of selected dates. We already fixed that for holidays, so we now need to modify TextDay.Color as follows:

TextDay.Color =
ColorFade(
    If( HolidayCircle.Visible || DaySelectedCircle.Visible,
        RGBA(255,255,255,1),
        RGBA(47,41,43,1)),
    If( Month(DateAdd(_firstDayInView,ThisItem.Value,Days))=Month(_firstDayOfMonth),
        0,
        80%)
)

Notice that now we are using white if the day is a holiday OR if it is selected (we only added the || DaySelectedCircle.Visible condition).

Finishing touches

Add 2 rectangles and place them behind the main gallery on the left and on the right to indicate weekend.
- To place them behind the gallery, click “Home” in the ribbon à “Reorder” à “Send to back”
- Set the Fill property to RGBA(0,0,0,0.05). This is a very light shade of gray
Make your DaySelectedCircle slightly larger than HolidayCircle and send it to back
- This will allow your users to select a day even if it is a holiday, and they will be able to see selected holidays
Highlight Today’s date by making it Bold and underlined:

TextDay.FontWeight =
If(IsToday(DateAdd(_firstDayInView,ThisItem.Value,Days)),FontWeight.Bold,FontWeight.Normal)

TextDay.Underline = IsToday(DateAdd(_firstDayInView,ThisItem.Value,Days))

We are using the IsToday function, which does exactly what its name indicates. Here is what you should get:

Wrapping up

Congratulations if you made it this far, and hopefully you had some fun while learning a thing or two. Keep sending us feedback and interacting with us on our forums. Tell us what you like and don’t like, and together we will keep pushing the boundaries of what is possible. That’s all for today. See you next time.

Source Maps under the hood – VLQ, Base64 and Yoda

David Nissimoff — Mon, 14 Mar 2016 09:56:49 GMT

Source Maps can be extremely useful whenever there is a preprocessor that modifies an input into its corresponding output. In such cases, a source map enables one to figure out the original location (line, column) that corresponds to a given location of the output (line, column), and vice-versa. This article discusses source maps, the problem they try to solve, how they work and some of the why it is the way it is. If I am successful in my attempt to explain things, by the end of the article you will have all the tools you need to understand or create your own source maps – even by hand if you want to!

Note: This article won’t be very useful for the vast majority of people who simply want to use source maps as opposed to understand source maps inside and out. If you don’t care about the details of how it works, then this article is probably not for you.

Why Yoda in the title of the article, you ask? Well, for the purposes of this article we will treat Yoda as a Jedi text preprocessor that takes words as inputs and puts them in semi-random order as output. TypeScript and CoffeScript are more complex preprocessors (although not necessarily Jedi), but the idea remains:

Input ⇒ Preprocessor ⇒ Output

Disclaimer: I am NOT an authoritative source on Source Maps and everything in this article is based on other articles I read online and on my own experimentation. If something looks wrong, it might very well be. Please leave a comment below and I’ll try to address it. My hope is that this will help explain some of the gaps not thoroughly covered in other places.

Who uses Source Maps?

Notable cases where source maps are commonly used include JavaScript compilers / transpilers such as CoffeeScript and TypeScript, or CSS preprocessors such as Less. All modern browsers support source maps to ease debugging: Chrome, Firefox, Safari, Edge and Internet Explorer 11 (since Windows 8.1 Update). Here’s an excerpt describing the benefits, from here

When the compiled or compressed JavaScript contains a pointer to a source map, all files are present, and source map functionality is enabled, the Debugger tool shows the original source and maps breakpoints and errors to it.

With Visual Studio 2013 and up you can even debug TypeScript right within the IDE (when you hit F5 and choose IE as the browser). The ability to set breakpoint and control execution flow in the original TypeScript source is a very powerful feature, and the magic behind that lies in Source Maps. You can achieve most of the same awesomeness on other browsers as well by following a few steps to get source maps generated for you, but IE still provides by far the best debugging experience for TypeScript (I suppose IE doesn’t get that kind of praise too often, which is unfortunate). See Typescript debugging in Visual Studio with IE, Chrome and Firefox using source maps.

The most basic source map

One way to create a source map would be to simply store the source location (line, column) that corresponds to each output character’s location.

“feel the force” ⇒ Yoda ⇒ “the force feel”

Output location	Input	Input location	Character
Line 1, Column 0	Yoda_input.txt	Line 1, Column 5	t
Line 1, Column 1	Yoda_input.txt	Line 1, Column 6	h
Line 1, Column 2	Yoda_input.txt	Line 1, Column 7	e
Line 1, Column 4	Yoda_input.txt	Line 1, Column 9	f
Line 1, Column 5	Yoda_input.txt	Line 1, Column 10	o
Line 1, Column 6	Yoda_input.txt	Line 1, Column 11	r
Line 1, Column 7	Yoda_input.txt	Line 1, Column 12	c
Line 1, Column 8	Yoda_input.txt	Line 1, Column 13	e
Line 1, Column 10	Yoda_input.txt	Line 1, Column 0	f
Line 1, Column 11	Yoda_input.txt	Line 1, Column 1	e
Line 1, Column 12	Yoda_input.txt	Line 1, Column 2	e
Line 1, Column 13	Yoda_input.txt	Line 1, Column 3	l

This table could then be encoded like this (the colors below are used simply to make it easier to distinguish one mapping from the next):

Mappings (283 chars length): 1|0|Yoda_input.txt|1|5, 1|1|Yoda_input.txt|1|6, 1|2|Yoda_input.txt|1|7, 1|4|Yoda_input.txt|1|9, 1|5|Yoda_input.txt|1|10, 1|6|Yoda_input.txt|1|11, 1|7|Yoda_input.txt|1|12, 1|8|Yoda_input.txt|1|13, 1|10|Yoda_input.txt|1|0, 1|11|Yoda_input.txt|1|1, 1|12|Yoda_input.txt|1|2, 1|13|Yoda_input.txt|1|3

While this would work, the source map grows quickly and takes up a lot of space. Let’s see how we can improve it.

1. Improvement: Don’t write output line number each time. Use ‘;’ to indicate a line change

Because in many cases the output is condensed into fewer lines than the input (minified JavaScript for example), not having to write the output line location for each entry results in great space savings. The same table we had before can now be encoded as follows:

Mappings (245 chars length): 0|Yoda_input.txt|1|5, 1|Yoda_input.txt|1|6, 2|Yoda_input.txt|1|7, 4|Yoda_input.txt|1|9, 5|Yoda_input.txt|1|10, 6|Yoda_input.txt|1|11, 7|Yoda_input.txt|1|12, 8|Yoda_input.txt|1|13, 10|Yoda_input.txt|1|0, 11|Yoda_input.txt|1|1, 12|Yoda_input.txt|1|2, 13|Yoda_input.txt|1|3;

2. Improvement: Table of names and inputs, referencing by indexes

Index	Input
0	Yoda_input.txt

Index	Name
0	the
1	force
2	feel

Output location	Input location	Name index
Line 1, Column 0	Line 1, Column 5	0
Line 1, Column 4	Line 1, Column 9	1
Line 1, Column 10	Line 1, Column 0	2

Now this can be encoded as:

Inputs: Yoda_input.txt Names: the,force,feel Mappings (31 chars length): 0|0|1|5|0, 4|0|1|9|1, 10|0|1|0|2;

3. Improvement: Use relative (instead of absolute) offsets

This idea will only be useful when leveraged by improvement 4 (VLQ encoding - Variable length Quantities). The goal here is to try to make the numbers that we encode smaller, because we can encode smaller numbers more efficiently than larger numbers thanks to VLQ. The way we try to make most of the numbers smaller is by using relative offsets. Looking at the first column of the previous table, here’s what relative offsets mean:

Output location (improvement 2)	Output location (improvement 3)
Line 1, Column 0	Line 1, Column 0
Line 1, Column 4	Line 1, Column (last + 4 = 4)
Line 1, Column 10	Line 1, Column (last + 6 = 10)

Applying that to the entire table, we end up with:

Output location	Input index	Input location	Name index
Line 1, Column 0	0	Line 1, Column 5	0
Line 1, Column +4	+0	Line 1, Column +4	+1
Line 1, Column +6	+0	Line 1, Column -9	+1

And this can now be encoded as:

Inputs: Yoda_input.txt Names: the,force,feel Mappings (31 chars length): 0|0|1|5|0, 4|0|1|4|1, 6|0|1|-9|1;

4. Improvement: VLQ (Variable Length Quantities)

4.1. VLQ in the decimal system

The idea behind VLQ is rather simple. Imagine you wanted to represent 4 decimal number in order. One option is to use a special character to separate those numbers:

1|2|3|4

What if you knew ahead of time that the numbers are all single digits? In that case you don’t need the separator characters, and the following would still be perfectly understandable, but much shorter (half the number of characters in this case):

1234

But what if each number could be more than a single digit? Well, with VLQ all you have to do is add an indicator to digits to indicate that the number still has more digits. Let’s encode the following numbers using VLQ:

1|23|456|7

Using an underline as our indicator that a number has more digits (the continuation indicator):

1234567

Here’s how to read this:

1 does not have an underscore, so that’s it → The first number is 1
2 has an underscore, so we continue; 3 does not, so that’s it → The second number is 23
4 has an underscore, so we continue; 5 also has an underscore, so we continue; 6 does not, so that’s it → The third number is 456
7 does not have an underscore, so that’s it → The fourth number is 7

4.2. VLQ in binary form

I cheated a little bit on the example above with the decimal system. I introduced the underscores as the continuation indicator, but underscores are, of course, not part of the decimal system. Introducing underscores is effectively the same as using a base-20 system instead (there are now 20 possible values for a digit: 0 – 9 not underlined and 0 – 9 underlined). In binary, however, we don’t have to cheat. How nice! Instead, we will use binary groups made of 6 bits (for a total of 64 possible values), and we will use one of those bits as the continuation indicator (‘C’ below). While at it, let’s also reserve another bit as a sign indicator (‘S’ below). ‘0’ will indicate positive; ‘1’ will indicate negative. First binary group (4 bits for value):

B₅	B₄	B₃	B₂	B₁	B₀
C	Value				S

Here’s what each of those binary ‘groups’ can represent:

Binary group	Meaning
000000	0
000001 *	-0
000010	1
000011	-1
000100	2
000101	-2
…	…
011110	15
011111	-15
100000	0 with continuation
100001	-0 with continuation
100010	1 with continuation
100011	-1 with continuation
…	…
111110	15 with continuation
111111	-15 with continuation

* Not required, but technically possible There is one additional improvement we can make: when a binary group has a continuation, the next binary groups don’t need to specify the sign bit again. We already know the sign from the first group, so we can use up to 5 bits for the value. It still needs the continuation bit, though, because the numbers VLQ encodes could be arbitrarily large and might require more than 2 binary groups to be represented. Continuation binary group (5 bits for value):

B₅	B₄	B₃	B₂	B₁	B₀
C	Value

Let’s now encode the same numbers we had before, but in binary: 1|23|456|7. Helper table for decimal to binary conversions:

Decimal	Binary
1	1
23	10111
456	111001000
7	111

Encoding decimal 1:

The corresponding binary value takes up a single bit (1). This will easily fit inside the first binary group (it has space for 4 bits). So this is what we get:

B₅ (C)	B₄	B₃	B₂	B₁	B₀ (S)
0	0	0	0	1	0

Encoding decimal 23:

The corresponding binary value takes up 5 bits (10111), so it doesn’t fit in the first binary group and therefore requires a continuation. We will put the 4 least-significant bits in the first group (0111) and leave the rest (1) for the continuation group.

B₅ (C)	B₄	B₃	B₂	B₁	B₀ (S)		B₅ (C)	B₄	B₃	B₂	B₁	B₀
1	0	1	1	1	0		0	0	0	0	0	1

Encoding decimal 456:

The corresponding binary value takes up 9 bits (111001000), so it doesn’t fit in the first binary group and therefore requires a continuation. We will put the 4 least-significant bits in the first group (1000) and leave the rest (11100) for the continuation group.

B₅ (C)	B₄	B₃	B₂	B₁	B₀ (S)		B₅ (C)	B₄	B₃	B₂	B₁	B₀
1	1	0	0	0	0		0	1	1	1	0	0

Encoding decimal 7:

The corresponding binary value takes up 3 bits (111). This will easily fit inside the first binary group (it has space for 4 bits). So this is what we get:

B₅ (C)	B₄	B₃	B₂	B₁	B₀ (S)
0	0	1	1	1	0

The final binary result

Now all we have to do is concatenate the results we have so far:

000010 101110 000001 110000 011100 001110

Base64 encoding

As it turns out, traditional base64 encoding defines an alphabet of 64 characters. Values from 0 – 63 can be encoded as a single character. Well, the initial choice to use 6 bits per binary group was not arbitrary. By using 6 bits per group we can now encode each group as a single character as per the base 64 alphabet. Here’s what we get for the bits above:

CuBwcO

4.3. Applying VLQ + base64 to the Yoda example

Following the same steps as outlined above, we can now encode what we had at the end of Improvement 3 by using VLQ + base64. This is what we get:

Inputs: Yoda_input.txt Names: the,force,feel Mappings (18 chars length): AACKA, IACIC, MACTC;

5. Improvement: Omit unnecessary fields

A mapping can omit some of the fields if those fields don’t provide any useful information. This means that a mapping entry can be any of the following options:

5 fields: Output column, input file name index, input line, input column, name index
4 fields: Output column, input file name index, input line, input column
1 field: Output column

Sadly, the simplistic Yoda example in this article wouldn’t benefit from this.

Wrapping up

Here’s a sample source map for the Yoda example, which should no longer be scary to look at.

{
    "version": 3,
    "file": "Yoda_output.txt",
    "sources": ["Yoda_input.txt"],
    "names": ["the", "force", "feel"],
    "mappings": "AACKA,IACIC,MACTC;"
}

Pretty cool, right? Next time you see Yoda, remember to ask him for a Source Map. You can also use an online tool by Alexander Pavlov available here to play with VLQ + base64 and see it working in real time. Let me know what you think in the comments and I will see you next time.

Useful links

Source Map Revision 3 Proposal (official)
Online tool to play with VLQ + base 64 encodings
Another article that tries to explain Source Maps and VLQ encoding.
Library to generate and consume source maps on GitHub

WinRT XAML for Serious Beginners – The XML in XAML

David Nissimoff — Mon, 19 Jan 2015 21:16:00 GMT

What is XAML

XAML is XML with a letter ‘A’ in it. Let’s learn XML first before we can add that very important ‘A’.

It is important to note that XAML uses a feature of XML that many people are not familiar with: XML namespaces. Read on to see a very brief explanation of XML namespaces.

Let’s learn XML, then!

Here’s one of the infinite ways one could describe the first post from this series in XML (eXtensible Markup Language):


    
        Hello everyone! (...)
    
    
        (...)
    
    (...)

Looking closely, you’ll see the snippet above has that article’s text in it, but there’s also some other stuff between ‘<’, ‘>’ characters. These are XML tags. There’s the opening tag and the matching closing tag . Note also how the blog post contains sections, indicated by opening tags

and closing tags

. Opening tags can also have attributes, so a generic opening tag could be .

It is worth pointing out how the element doesn’t have any content (the closing tag immediately follows the opening tag). If you don’t have anything to put between the opening and closing tag, you can save some typing by using the shorter, self-closing notation . There are no other semantic differences and the latter is shorter, and hence usually preferred whenever possible.

You might also have noticed that this snippet had a comment in it: . Comments start with “”. An empty comment could be written as “”

Fancy XML – Namespaces

Now that you know about XML tags, the previous XML snippet describing this blog post should be easily understandable and its structure very clean. However, the only reason why you actually know what that snippet is describing, is because you’re referring to some common knowledge and assuming that refers to a blog post, that

refers to a text section within the blog post, etc.

Note, however, that

could mean other things in different contexts. If I’d been describing an orchestra (stay with me!) – in this case the orchestra has a brass section and a string section – then the following XML might be reasonable:

Now we have a problem:

means two completely different things in these contexts, and computers don’t like ambiguity (which is a good thing – we sure don’t want a section of this blog post ending up in an orchestra!). So let’s be more explicit about what we mean.


    
        Hello everyone! (...)
    
    
        (...)
    
    (...)

The important part here is the attribute xmlns (XML NameSpace declaration). The value of this attribute can be any string – XML does very little to enforce any format. It is customary, however, to use strings that look like web URI’s, which don’t even have to exist! XAML uses this by default: xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation". Try going there with a browser, and you’ll see it is NOT a valid link – and this is totally fine.

You can also define more namespaces in one XML document, by using prefixes. Consider a blog post about XAML for orchestra members:


    
        This is some text in the blog post.

Let’s see what just happened:

The element defined the default namespace: “blog post common knowledge”. It is also defining a “xmlns:orch” namespace as “orchestra common knowledge”. Now that it is defined, this orch: namespace could be used in any of this tag’s children (it could also be used for the current tag!).
The BlogPost has a text section with header “Introduction”.
The blog post also has an orchestra (“orch:Orchestra”) which has a brass section and a string section.
There is no more ambiguity!

So what is XAML?

Now that we know the basics of XML, let’s move on to the ‘A’ in XAML: eXtensible Application Markup Language.

XAML is a declarative language that uses XML to describe how to initialize a set of objects. “Initializing a set of objects” is something that can be easily achieved with programming languages (such as C# or VB.NET) by calling class constructors and setting the desired properties. Indeed, almost everything you do with XAML can also be done in code. However, XAML offers a few significant advantages that will become clearer as we go:

Allows for cleaner / more maintainable code (because the UI design can be kept separate from code-behind)
Requires much less typing that the equivalent C# code (it is more concise)
Has very rich tooling support in Visual Studio: IntelliSense, code generation, F12 Go to Definition, etc.
Supports Templating. I’ll discuss Templates and how to use them in a later post – suffice to say that there is a way to define a chunk of XAML as a template, and that template can be used multiple times in many places as if it was copied each time. Think of a Button control. There is a template that defines what it looks like, and then adding a button to a page will end up invoking the button Template. This is immensely useful for multiple scenarios, and one of XAML core strengths.

Other online resources

W3Schools.com XML Syntax
W3Schools.com XML namespaces

Wrapping up

This was meant as a jumpstart post into XML and the main XML features which are used extensively with XAML, and I hope it is useful at that. If you have any suggestions or feedback, please leave your comments below and I’ll do my best to address them in a timely manner.

WinRT XAML for Serious Beginners – Tips for successful online searches

David Nissimoff — Mon, 19 Jan 2015 20:14:00 GMT

This is a very short post, but at the same time it might be the most valuable of all. As the old saying goes:

“Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime.”

This blog post does neither. But it shows you how to find other fishermen!

How to find WinRT XAML resources online

Given the confusing and overlapping usage of terms (see my other post Where are we? Navigating Win32, MFC, GDI, GDI+, Windows Forms, WPF, Silverlight, Windows Runtime, WinRT and Windows Phone, XAML is used in WPF as well as WinRT; WinRT could be a version of Windows or the API surface; etc.), here are some tips to help you get useful results online.

A) Searching for MSDN references

Using the query “windows runtime xaml ” (without quotes) usually works and finds what I need among the first results. For example:

“windows runtime xaml EnableDependentAnimation” (Bing, Google)
“windows runtime xaml themeresource markup” (Bing, Google)

B) Searching in Forums / Community resources

Adding the word “WinRT” in the search query will help you get meaningful results for modern apps since, more often than not, people in the community use WinRT to mean “Windows Runtime” rather than the specific Windows version.

“winrt custom controls” (Bing, Google)
“winrt animations” (Bing, Google)

That’s it!

If you have any suggestions or feedback, please leave your comments below and I’ll do my best to address them in a timely manner.

In the next post we will start learning XAML from the ground up: The XML in XAML.

David Nissimoff's blog

Reusable PowerApps Control Templates

Here it is: https://patemplates.azurewebsites.net/

Using a template

Creating a template

Wrapping up

Building a calculator in PowerApps (that can do 1 + 2 + 3)

How it works

The initial state

Number entry

The four mathematical operations

The Percentage button

Number display

Wrapping up

Using Fiddler to simulate AAD failures with ADAL.js

Scope of this article

Background

When things go wrong

Simulating failures with Fiddler

Wrapping up

Scatter plots in PowerApps using a Gallery control

How it works

Formula time

Wrapping up

Text conversion power tool for Visual Studio Code - Inception

What does it do?

Advanced PowerApps visualizations with dynamic SVG’s

Some background

The magic expression

A note on image resizing

Troubleshooting

Wrapping up

Building an interactive calendar view with PowerApps

Introduction and strategy

Before we begin – A trick for selecting controls

Initialization

Making the initialization formula execute

The main gallery

Switching months

Showing the current month

Showing the weekday header (Sunday, Monday, Tuesday, …)

Showing holidays

Adjusting the text color for better contrast

Allowing date range selection by tapping - Strategy

Adding the OnSelect formula to handle taps

Showing the current selection

Finishing touches

Wrapping up

Source Maps under the hood – VLQ, Base64 and Yoda

Who uses Source Maps?

The most basic source map

1. Improvement: Don’t write output line number each time. Use ‘;’ to indicate a line change

2. Improvement: Table of names and inputs, referencing by indexes

3. Improvement: Use relative (instead of absolute) offsets

4. Improvement: VLQ (Variable Length Quantities)

4.1. VLQ in the decimal system

4.2. VLQ in binary form

Encoding decimal 1:

Encoding decimal 23:

Encoding decimal 456:

Encoding decimal 7:

The final binary result

Base64 encoding

4.3. Applying VLQ + base64 to the Yoda example

5. Improvement: Omit unnecessary fields

Wrapping up

Useful links

WinRT XAML for Serious Beginners – The XML in XAML

What is XAML

Let’s learn XML, then!

Fancy XML – Namespaces

So what *is* XAML?

Other online resources

Wrapping up

WinRT XAML for Serious Beginners – Tips for successful online searches

How to find WinRT XAML resources online

A) Searching for MSDN references

B) Searching in Forums / Community resources

That’s it!

So what is XAML?