PowerApps: Rules for Conditional Formatting

Well done PowerApps team!! Just days before Ignite they rolled out Rules for Conditional Formatting in PowerApps. You could technically get the same functionality with building out formulas, but the new (experimental) rules bypass this and are MUCH more end-user friendly.

image 

Check out the blog post.

AND take a look at the supporting documentation that’s already released:
Create a rule in PowerApps

image

For those of us coming from a SharePoint background this is creeping closer to functionality that was available back in the days of SharePoint Designer. As soon as a true web part is available to embed a PowerApp in a SharePoint page (hopefully the new “modern” pages) users will be able to replace SharePoint views with robust apps that include conditional formatting and other goodies not currently available in SharePoint alone. 

Exciting stuff and more to come!!

Source Parameter Still Alive in Modern Pages

SharePoint’s “modern” capabilities are changing the face of SharePoint – for the better. But it is taking us further away from some of the tricks and approaches that work with “classic” SharePoint. Thankfully one of the long-standing legacy features of SharePoint still seems to work – the Source parameter. 

When used as part of a URL in SharePoint the Source=[URL] parameter takes users to the specified page after a form is saved or cancelled. This allows us to manage some of the navigation flow for users.

So how does this work with “modern” lists and pages. On a list, you have the ‘New’ item button on the top bar.
image

When you click it the new item panel opens up. The top links on the panel include a ‘Copy link’ link.
image

image

‘Copy link’ for the New Item gives us the URL of the New Item form that can be used to link from other locations – such as an email footer, the left nav in a SharePoint site, etc. This link includes the Source parameter and by default will go to the default list view page for the list. Usually, that’s not where we’d like to see users end up.

If I’m building an intake solution, I might have a ‘My Requests’ page where I’d like users to end up. To make that happen it’s as easy as copying the link from the New Item page, getting the link to the My Requests page, and then swapping out the Source parameter value.

The default New Item link (with site-specific stuff stripped out):
https://[mydomain].sharepoint.com/sites/[sitename]/_layouts/15/listform.aspx?PageType=8&ListId=[listGUID]&RootFolder=&Source=[THIS IS WHAT YOU CHANGE]&ContentTypeId=[contentTypeId]

Target destination URL:
https://[mydomain].sharepoint.com/sites/[sitename]/SitePages/My%20IT%20Requests.aspx

The link you’ll use:
https://[mydomain].sharepoint.com/sites/[sitename]/_layouts/15/listform.aspx?PageType=8&ListId=[listGUID]&RootFolder=&Source=https://[mydomain].sharepoint.com/sites/[sitename]/SitePages/My%20IT%20Requests.aspx&ContentTypeId=[contentTypeId]

Using this approach you have a link you can use where users will be able to submit a new request, then end up on the My IT Requests page rather than the default list view page.

References

SharePoint Fest – Chicago

Heading to SPFest Chicago in December? I’ll be presenting a few sessions on PowerApps.

PWR104 – PowerApps for SharePoint Users
PWR202 – From SharePoint to PowerApps: Evolution of the ‘Intake Form’ Solution
(Check out the sessions here)

There’s going to be a LOT of great speakers, sponsors, and content. Fresh out of Ignite there will be a lot to talk about.

Interested in attending? Here’s a discount code (click for registration):
SPFestChi17

Hope to see you there!!

Microsoft Ignite 2017 !!

UPDATE: They’ve managed to fix our session overlap – new location and time shown below!
UPDATE: Added links to the Tech Community Discussions for each session. Chime in! 

In a relatively late development, I’ll be attending and speaking at Ignite in Orlando this year! I wasn’t planning on either, so this is exciting. Working on both SharePoint and PowerApps, I’ve got one theater session and will be co-presenting with Cathy Dew on a full breakout session. Links and details below.

Microsoft Ignite in Orlando. Sept. 25 – 29th.

Evolution of the Intake Request Solution from SharePoint to PowerApps
OCCC South – Expo Theater #4
Wednesday @ 1:05 – 1:25
Tech Community Discussion <- Talk to us! 

w/Cathy Dew:
Create Custom forms and digital experiences in SharePoint using Microsoft PowerApps
OCCC W307
Thursday @12:30 – 1:45
Tech Community Discussion <- Talk to us! 

Yes, if you’re looking at the times the two sessions actually overlap right now (fixed!). We’re working on that. Smile with tongue out Worst case I leave Cathy’s session a little before we’re done and RUN to the other building. Let’s hope it doesn’t come to that. Either way we’ll make it work.

SUPER excited to be able to attend and contribute. Hope to see you there!

JS Link – Add Ellipsis to a Column

Ran across a random request the other day to see the ellipsis menu added to a column other than the Title column. Turns out it’s a pretty simple change similar to how we change the column header text in a SharePoint view.

listItemMenu = “TRUE”

See the full code HERE.

Note: To remove the ellipsis from the Title column in the view, change the column from “Title (linked to item with edit menu)” to “Title” field in the view Columns.

References

Note and Disclaimer: JS Link currently works in SharePoint 2013, 2016, and SharePoint Online. JS Link does NOT work with the ‘Modern Experience’ interface – only Classic Mode. See ‘Choose Your Path Forward’ for more information.

JS Link – No More HTML in Calculated Field Change

Didn’t see that coming.

More than a few times I’ve had folks bring up solutions using calculated fields to do some of the same things we do with Client-side rendering (CSR) and JS Link in SharePoint. That was fine at the time. Just another way to get to the solution using creative out of the box capabilities – until now.

Microsoft implemented a change yesterday (June 13, 2017) that HTML or script elements in calculated fields would be turned off. Apparently this was an ‘undocumented use’ of the feature. The system is now escaping special characters and replacing the column with a blank in the list view.

Now What?

The short answers – in no particular order:

  1. Client-side rendering via JS Link property of web parts. This only works for Classic mode. If you are using Classic mode, this is likely the ‘best’ short term answer to broken interfaces until a longer-term solution is implemented
  2. Third party products
  3. SPFx Extensions or customization
  4. PowerApps

CSR and JS Link: There are multiple ways to implement JS Link, some via the browser (how I use JS Link) and via deployed coded solutions (Dev only). As mentioned in other responses JS Link does NOT work in the modern experience. It will only work in the Classic mode (as long as it is around). There have been NO dates announced for getting rid of Classic mode at this time. If you choose this direction it’s worth noting that if you’re comfortable writing script in the calculated field you’ll likely be comfortable writing the code needed to get CSR to work. I’ve got plenty of examples in the link included here.

Third party products. I’ve seen folks mention something called Skybow but I’ve never seen or used it. Only mentioning because it was mentioned by someone in the community I trust.

SPFx Extensions and customizations: This is the ‘approved’ development path for deployed solutions. If you are a developer and/or are creating solutions that are used across a broader scope this is likely the path you should go down.

PowerApps: This is likely the long-term replacement for solutions you used HTML or other scripting in your calculated field for (hand slap from English teacher). Embedded integration with SharePoint isn’t there yet (well, it kind of is…), but has been announced. You can start building the views/solutions you need, but they won’t be ‘really’ embedded in SharePoint yet – web parts and/or other tools are coming soon (they’ve been announced).

Note: Much of the attention to PowerApps has been in the area of forms, but views will be a part of the capabilities as well. They’ve already made improvements with introduction of controls like the Data Table control. Check out my posts on PowerApps for SharePoint users, specifically things like ‘List View’ Layouts.

Update

Migration Note: Do not forget to take this into consideration now as something to look at when migrating from an environment where special characters (HTML and scripting) work into an environment (O365, etc.) where they do not. You’ll need a plan to replace or update your field customizations.

Summary

Unfortunately this seems like a pretty sudden change. I certainly had no idea it was coming. For folks that were using this approach there’s a lot of scrambling going on right now dealing with blank columns that weren’t blank a few days ago. Depending on how complex the scripting was, some fixes might be as easy as stripping the HTML and script out and displaying a simple value. More complex solutions are going to take some effort to redo, either with a new approach, new code, or 3rd party software to get the business functionality back.

For simple HTML replacement, JS Link could be an easy switch. If you’ve never used it before check out the Hello World post and then the KPI post. Those will cover a lot and introduce you to the JS Link concept if you need to dig deeper for more complex solutions.

Good luck!

References

PowerApps – No Items to Show

In a previous JS Link / CSR post we covered how to handle what is displayed in a web part when there are no items to show. SharePoint’s default message is an ambiguous:
“There are no items to show in this view of the [listname] list”

Not an awesome user experience. Something a little more contextually relevant might be more helpful to users – either in a simple list view, or in a more complicated solution.

A PowerApps Gallery control isn’t any better – merely showing a blank record. The Data Table control, on the other hand, has a handy ‘NoDataText’ property that can be configured to display a message when the control is empty. 

So, what do we do when using Gallery controls – until a ‘NoDataText’ property is added and/or the Data Table control allows for more configuration options? As is the answer with many things in PowerApps: We use a formula.

Using an appropriate text field control within a Gallery control, we can replace the Text property with a formula like the following:

If(CountRows([_List Name_])=0,”[_Put your message here_]”, ThisItem.Title)

For a SharePoint list named: DefaultList you get the following:

If(CountRows(DefaultList)=0,”Nothing to see here”, ThisItem.Title)

The ‘CountRows’ function as you might guess returns the number of rows in the list.

The ‘If’ function tells the control to set the displayed value of the control to “Nothing to see here” if the condition (there are 0 rows) evaluates to ‘true’. If not, the value of the control is ThisItem.Title – the normal field value we would expect in the control. The text is only displayed when there are no items in the list. 

That’s it. Smile 

References

JS Link – Creating Custom Links

I’ve spoken about this topic so many times I keep forgetting that I haven’t put together a decent post on the subject even though I’ve had sample code posted for quite some time (see References below). Smile with tongue out In my opinion, after conditional formatting this is a sweet spot for JS Link use cases and functionally WAY more useful.

Disclaimer: For those of you using SharePoint 2013, this is still relevant content. If you are using SharePoint 2016 or O365 and have PowerApps available and/or are only using ‘modern’ pages and views there are other potential solutions for you.

Business-wise, what makes custom links useful is the ability for users to build solutions – ‘stitching’ together SharePoint functionality into productive business solutions – beyond what the out of box lists and libraries provide.

What makes custom links with JS Link in SharePoint so useful is the crossing of a few core bits of functionality in SharePoint – that we’ll cover in more detail in this article:

  • Most everything in SharePoint is available via a URL – so we can ‘decode’ the links SharePoint uses to build our own links to the data we want our users to get to
  • ‘Source’ data passed through the querystring allows us to control where the user is taken after a form is used (assuming the link destination was a form – it doesn’t have to be)
  • Creating a HTML link tag is super easy

User Experience Tweaking

You can use CSR to build ‘web-user-friendly’ vs. ‘SharePoint-user-friendly’ user interfaces. If all your users are familiar with SharePoint this isn’t a compelling reason. However, for environments where non-office workers (warehouse, production, etc.) are using SharePoint sites and solutions, making the interface intuitive – making it more ‘web-friendly’ – is a compelling reason to look at enhancements like this. For example:

Non-SharePoint users don’t know what the ellipses (…) are. They don’t know they need to click on the ‘…’ to get a menu for more details, etc.
image

By adding a column with web links to forms, it makes the interface easier to navigate – the useful links are displayed prominently instead of inside of a menu that needs to be opened first. If you had custom forms this same approach could be used to get the user to those forms instead of the default forms. SharePoint only enables linking to the default forms in the interface.
image

This also gives the solution owner more control over the interface by only displaying the controls they want made available to users.

How-To

If you use the SharePoint menu to navigate to the Edit page and look at the URL you will see something like this:

https://forgegroup.sharepoint.com/TeamSite/CSR/Lists/DemoList/EditForm.aspx?ID=1&Source=https%3A%2F%2Fforgegroup%2Esharepoint%2Ecom%2FTeamsite%2FCSR%2FSitePages%2FDemo%2520-%2520Link%2520to%2520Pages%2520and%2520Forms%2Easpx&ContentTypeId=0x01004578E7B0B3F1BE41A0EE6CF023F4518D

If we break the URL down we get the following:

  • https://forgegroup.sharepoint.com/TeamSite/CSR/Lists/DemoList/EditForm.aspx
    This is the URL for the form page
  • ?ID=1
    This is the parameter passed in that tells the form which item ID in the list to display
  • &Source=https%3A%2F%2Fforgegroup%2Esharepoint%2Ecom%2FTeamsite%2FCSR%2FSitePages%2FDemo%2520-%2520Link%2520to%2520Pages%2520and%2520Forms%2Easpx
    This tells SharePoint where to navigate when the form is submitted or cancelled – essentially where the user ends up next. This can be VERY useful when building your own solution.
  • &ContentTypeId=0x01004578E7B0B3F1BE41A0EE6CF023F4518D
    Finally, this is the content type for the item in the list. We aren’t using this information for our example.

What we’re doing with the CSR code is creating our own link that will be displayed in an overridden column. The complete sample code can be found in the CSR_CustomLinks.js file. We’ll just look at the key lines here:

image

  • The link is going to ‘../Lists/DemoList/EditForm.aspx’ where ‘DemoList’ is the name of my list and ‘EditForm.aspx’ is the default edit form created for the list. If you’ve created a new form (with SharePoint Designer, etc.) and want to use it, this is where you’d put the name of the file. You could even leave the default ‘edit’ form as default but use this link to get to a separate edit form.
  • ‘ID’ is the name of the parameter we’re sending to the form. We’re getting the data from the list as ctx.CurrentItem.ID
  • Then comes our own ‘Source’ value to tell SharePoint where to navigate after the form has been used. This can be helpful if you want to direct users to a specific place other than where they came from.
  • Finally, ‘Edit’ is the text that will displayed as the link. You can use whatever verbiage makes sense to your users here OR replace the text with a graphic or icon.

In the sample code I’m actually building two links – ‘Edit’ and ‘Details’ in the same column override.

Get creative with this. The link doesn’t have to be to a form for the current list. It could be a view for another list with a reference back to the current list. For example you might have a document library where you’re keeping reference documents for a list and use a reference ID field in the document library to connect back to the current list. You could use this CSR approach to build the URL string to a view of the document library and filter it by the reference ID… Then a user could be looking at the current list and click on a simple link to all the related documents for that item.

Notes

  • Using graphics: Choose a location for any graphics you want to use as part of your solution. A good place might be the SiteAssets library. Then use code that looks something like this:
    image
    Replacing the ‘Edit’ text with an HTML image tag linking to your image file.
  • Combine this link with conditional formatting and potentially display different actions or icons depending on the content of your list item.
  • Filtering on a lookup column is another post using a similar custom link approach.
  • PowerApps: Moving forward solutions like described in this post will be accomplished using PowerApps. If you’re already using SharePoint Online, the capabilities are already available by building not only a list view from a SharePoint list, but being able to customize each column and build custom forms that you can link to within your PowerApp.

References

PowerApps – Data Table Control

PowerApps takes another step in the direction of SharePoint lists. This isn’t intended to be a knock on anything, just an effort to put it into perspective for SharePoint user. With a data table (grid) control PowerApps is able to look a lot like a SharePoint list view.  Smile  PowerApps users now have a control to more rapidly replicate SharePoint view-looking solutions. True, it’s not just SharePoint… but that’s where many users are coming from… and the table/grid layout will be a nice comfort zone for ‘SharePointers’.

If users want to display items from a data source, they have a variety of options in PowerApps – initially centered on the gallery control. The gallery has a LOT of flexibility, allowing users to select gallery templates or build layouts from scratch. Layouts might look like a grid layout, or like a ‘card’ with fields arranged more like the old announcement web part in SharePoint. With this flexibility, however, comes more effort. Not a bad option, just a trade-off. 

The Data Table control has fewer configuration options, but is a big time-saver in that it drops a complete control on the PowerApps screen and allows for a quick configuration to a data source. Fewer options (for now), but quick and easy creation.

Once on a screen, the Data table can be found in the Insert tab: image

Once inserted on a screen, the control needs to connect to data. Clicking on ‘Connect to data’ will allow the user to use existing connections or add a new one. image

In the properties column before connecting to data:
image

Connecting to the SharePoint site, you need to enter the URL of your *site*, not the *list* directly. Once connected to the site you’ll be able to select the list you want.

Once a list is selected, the fields available are displayed. Fields are selected in the order they are to be displayed from left to right. They can be reordered by dragging the columns up and down in the property pane shown here:
image

The screen view and property page with fields selected:
image

As the fields are selected, they show up on the control itself. Boom. That’s it for starters.

The control has a standard collection of basic properties available for configuration, though I expect the options to expand over time. 

Notes

  • CSR – In SharePoint there was no option to configure the text displayed when a web part was empty without getting into some Client-Side Rendering or JS Link customizations. With the Data Grid control there is a “NoDataText” property that takes care of this capability out of the box. Yea!
  • Filtering and Sorting – These aren’t the only other properties of a SharePoint view, but they are the next pieces after choosing the fields to display. See how to use formulas in PowerApps to control the ‘view’ sort and filter options.  
  • Connected controls – The Data table can be connected to another control, like a form where record data can be displayed and edited. Definitely check this one out in the data table control documentation (listed in references below).

Top Wants

This is a great start so I don’t want to appear too negative. I’m a fan of Microsoft’s newish approach to getting new features out and then moving forward with steady improvements over time. With that, here are the top things that came to mind when initially trying the new control:

  • Column widths, row heights, and word wrap – The ability to control the cells a bit more. You can see in the images above how the field widths aren’t acting like you’d hope or assume. The Title field should be bigger and the Priority field should be smaller. It’ll get there.
  • Column formatting, Conditional formatting – Right now the font controls are limited to the headers and the rest of the cells. It will be nice to have column/field level formatting and conditional formatting – one of the most requested and customized features in SharePoint views. 
  • A supported / best practices method for embedding these PowerApps into the SharePoint interface. THAT is how we’ll be able to replace and extend the current SharePoint list view with a PowerApp.

References

PowerApps Community Plan

Now, this is just awesome. In another move to increase user onboarding, Microsoft announced the PowerApps Community plan – free for users to get ramped up on building solutions with PowerApps, Microsoft Flow, and the Common Data Service.

Why is this particularly cool? Users have always been able to sign up for a free trial with their own tenant but that has time limitations. Literally millions of O365 users potentially have access to PowerApps via their organizations, but many of these organizations are hesitant to enable PowerApps in their environments. Regardless of your individual situation, you now have access to a free development environment to not just check out, but dig in and learn one of the most promising tools out there for business solutions.

From a SharePoint user perspective, this is a great way to check out the tool that will both replace InfoPath and extend SharePoint out of box capabilities previously covered by SharePoint Designer, Client-Side Rendering (CSR) and JS Link, and other power user tools. Ramp up on your own and be ready for when your administrator turns PowerApps on in your tenant – OR be the reason they turn it on when you understand it’s capabilities and can demonstrate both your skill and solutions ready for your particular business cases. While SharePoint is, and will continue to be a data source for PowerApps – also check out the Common Data Service. Not all apps should be in SharePoint (really, its not the only tool out there. Smile ).

Be sure to check out the FAQ at the end of the blog post for good info as well. You will be able to transfer apps from your individual environment to another tenant… It’s not a dead-end tenant.

References

  • Sign up for the PowerApps Community Plan
  • Check out the blog post for more details.

Update

Seems worth noting that you create your community account as a part of a business account – which many folks will already have. But not to fear, PowerApps keeps your community account separate from your actual work account by using the same account and password, but creating a new environment. Well done PowerApps Team!

image

  • ‘TrecStone (default)’ is, yep – the default PowerApps environment for my account.
  • ‘Demo Area’ is a separate environment created to try out environment functionality
  • ‘Wes Preston’s Environment’ is my new personal PowerApps Community Plan environment