PowerApps Video | Sliding Menus with Charts

Third part of my video tutorials for PowerApps.

  1. Using Charts
  2. Displaying the top 5 or 10 selection of a chart
  3. Sliding Gallery
  4. Visibility based on a variable.

The first 2 parts of the video are:

PowerApps | Highlight Gallery Selection

There are a couple formulas to highlight the current gallery selection. This formula would be in the Gallery’s advanced properties > TemplateFill. The best formula to highlight a gallery selection is, with your preferred RGBA values:

If(ThisItem.IsSelected,RGBA(220, 220, 255, 1),RGBA(0, 0,
0, 0))
Screenshot of highlighting selection
TemplateFill

If your background is white, one easy way to pick a selection color is to use an RGBA color value close to white. RGBA(255,255,255,0) is white. Simply lowering a color value and changing the last digit between 0 and 1 is a good choice.

This site also gives you an easy way to select an RGBA value: https://www.hexcolortool.com/

PowerApps Tutorial Video: Creating a Form, Editable Form, Changing Columns to Multi-Select

I have started creating my own videos. This is my very first! I have been working quite some time on PowerApps, through my job many people are coming to me for questions on how to create an App. I decided to just go ahead and record myself creating some basic functionality so anyone can get started and produce their first app.

Once you have created your connection to your SharePoint list, use this video to start builiding your first App!

Introduction: First steps for creating your first PowerApp connected to SharePoint.

1. Creating a Form.

2. Making an editable Form.

3. Using a Datatable to edit previous entries.

4. Creating Navigation buttons.

5. Changing a field to multi-select in PowerApps.

My next goal is to create a new video (Part 2) and change from a datatable to a gallery and start doing some UX until I have a full production app developed. Stay tuned if you wish to see the app grow throughout the next few weeks!

PowerApps | Using box-shadow HTML text controls

In PowerApps you can use an HTML text control with box-shadows to allows yourself to easily implement drop shadows on box elements. This is the best way to create title bars so far that I have found.

powerapps_html_selection

To use HTML text with a shadowbox you need to at least define the horizontal and vertical offset of the shadow.


Defining a HTML shadowbox

The first number when defining a html shadowbox is the vertical offset. While the second number is used to define the horizontal offset.

  • box-shadow: 5px 10px;

The optional third and fourth definitions can be used for blur distance and spread respectively.

  • box-shadow: 5px 10px 3px 1px;

And finally the last number is used for the shadows color.

  • box-shadow: 5px 10px 3px 1px #888888;

Once you have defined your box shadow you can put it into the HTML text control.

powerApps_html_title

Example:

<div style=’
padding:33px;
font-size:25px;
box-shadow: 5px 5px 3px 1px #999;
background: lightblue;’>
</div>

PowerApps | Publishing and Saving & Using the Version Comment Box

Using Version Comments

From my experience with PowerApps most companies only have one production environment for their PowerApps. This increases the importance of version control in your production environment. Sadly you can only restore up to 6 months in the past.

versions

  • After you have saved the app once, you can add a version note before each save of your production PowerApp by filling out the version note section before each save.

save_version_note

  • Using this method a version note will be saved along with the version.

versionnote

 

Restore a Version

  • To roll back to a previous version. Navigate to PowerApps Home > Apps > Select the App > “…” > DetailspowerApps_Details
  • Select the versions tab > “…” > Restorepowerapps_restore

 

Auto-Save

  • PowerApps also has the ability to turn autosave on or off. Autosave is on by default.power_apps_autosave

 

PowerApps | How to use Square and Circular Buttons

All buttons in PowerApps come by default with slightly rounded edges or corners. One simple trick to change that default look is to have completely square buttons or circular buttons. The trick is to edit the border radius of the button.

circ_sqr_buttons

Square

In the properties of the button change the border radius to 0.

squarebuttons

Circular

Make sure that the width and height are the same size, then in the properties of the button change the border radius to at least half of the size and width of the button.

circularbuttons