Tag Archives: modern list

Create your personal list mailer with Microsoft Flow

I've got a fever for Flow!

Sorry, I had to.

I had a need and all I needed was more Flow!

In a communications site in SharePoint Online, I have a list of contacts for my committee, something like:

SharePoint list showing contacts

This list is great, it lets everyone see who’s who across the committees.

Now I want to email them, sometimes just the Liaisons, sometimes just the Lead/Co-Leads, sometimes everyone. I tried copy/paste from the list but that didn’t work AT ALL. I could connect with Excel then copy/paste, but that was getting annoying.

If only there was a better way…

Enter Microsoft Flow!

This task is right up Flow’s alley. With a little time (~30 minutes) and a little research, I was able to create a mass mailer in SharePoint Online using Flow.

How?

Create a list in SharePoint

First thing, we need a list to collect the email details, like subject, message, to, etc. Here’s the list I made, pretty straight forward:

New send to form in SharePoint

The To drop down is simply the same options from my Committee Contacts list

Who to send the email to

I added All and made it multi-select too.

Create the Flow

If you haven’t created a Flow yet, do it. Super simple, super powerful. Here’s the flow I made:

The entire Microsoft Flow for getting and sending emails

Let’s take it a little slower.

Kick it off with a Trigger: SharePoint – When a new item is created

I created the trigger to read from the list I created earlier. Easy enough ;). Quick note, at this writing, Flow will only show you the modern lists in the site in the drop down. Classic lists will need to be manually entered.

Condition: To contains all

condition_all

This part was a little tricky at first. I needed to check if the To field had All selected. If so, then just grab everyone from the list, if not we wanted to filter it out. Since the To field is a multi-select field, I need to check if All is one of the selected items. A multi-select field comes into Flow as an array.

I worked around this by flattening the array into a single string. You’ll see the Condition has an Expression in it: join(triggerBody()?[‘To’], ‘,’). This takes all of the values selected in the To field, and makes a single string out of it, comma separated. It mashes the array of options into a single value for easier comparison. Then the rest of the condition checks if this string contains the word All.

If Yes, All is selected

yes_condition

Action: SharePoint – Get Items; All Contacts

First, let’s get All Contacts. That action simply connects to the list in my site and pulls all items. We do some fancy filtering in the No condition below.

Action: Data Operations – Select; Select emails

Then we take the array that gets returned, and just pull out the email from the Person field. We use a Select action for this.

Initially, using a Select action has an option for you to create a new array of objects by mapping values to your custom properties. As seen here:

select_map

In the Map field, you can specify any key you want, and then put in a value. You can add multiple rows here too to create your own complex object. This is great but we don’t need this.

Instead, press the little T icon to the right, and this changes the Map to a single field. You’ll see it’s preloaded with some basic JSON. Delete it all and just insert the 1 field we care about.

select_emails

This makes a single field array, containing just the email addresses. We’ll need this to be able to merge all of the values together for the email!

Action: Office 365 Outlook – Send an Email; Send Email

Now let’s send the email!

send_email

In the To field, we are joining the Select emails array into a single string. That Expression is: join(body(‘Select_emails’),’;’). If we didn’t use the Select action previously, we won’t be able to create a single string with all of the email addresses.

In the Subject and Body fields, we include the fields from the original SharePoint list item.

In the CC field, I automatically CC the creator, and anyone they specified in the CC field.

Note on From. When the email sends, it will send as you, since the Office 365 Outlook connector is using your profile. If you have permission to send on behalf a group account, maybe a Group, you can put that email address here. I didn’t bother, just sending from me.

Finally, I make sure Is HTML is enabled. It’s a Rich Text field in SharePoint, and I want to ensure that formatting carries through.

That part is done!

If No, a specific group of users was selected

no_condition

The No condition is a little bit more complex. We have to know which groups of users the creator specified in the To field, then get only those email addresses and then send the email.

Action: Data Operations – Select, Select Group

The To field is an array value, since it’s multi-select in SharePoint. This select statement grabs the individual values into a single array. More on Select action above under the Yes condition.

select_group

Action: Data Operations – Join

Now let’s join the To values from the above Select group action into a single string value, with a little jazz.

join

The Output in the From field, is the Output from the Select Group action. The Join with will join each value together, with that string between each value. For instance, if my array looked like [‘One’,’Two’], then it’ll join it like ‘One’ or Category eq ‘Two. This is partial odata filtering for the next action.

Action: SharePoint – Get Items

Next we’ll get the people from the selected groups.

get_items

This is the same Get Items action from earlier in the Yes condition. Here we select the list containing all of the contacts, but then specify a Filter Query. The filter query has the rest of the odata filter. This value is Category eq ‘[Output from Join]’. Making sure to wrap the output in single quotes.

When more than one item is selected in the array [‘One’, ‘Two’], this Filter Query will be Category eq ‘One’ or Category eq ‘Two’.

Action: Data Operations – Select; Select emails 2

Same deal from earlier under the Yes condition, we want to just pull the email addresses of the people we got from the list.

select_emails2

I had to name is Select emails 2 since there is already an action in this flow Select emails. Fancy right?

Action: Office 365 outlook – Send an Email

Now let’s send the email! Nothing too different than what we did under the Yes condition

send_email2

Again, the To field has the value Expression: join(body(‘Select_emails_2′),’;’). Joining the output from the Select Emails 2 action. Make sure Is HTML is set to yes! (I frequently forget this)

Finally, mark the SharePoint Item as Sent

One last action, sitting outside of the condition, to update the SharePoint item as sent.

Action: SharePoint – Update Item

update_sp_item

We now update the originally created item, and set the Sent field to Yes. You do need to carry over the original field values, otherwise they’ll be blank after it updates.

 

Done!!

Feels like a lot but it wasn’t. Let me know how it goes! ‘Til next time, Happy Flowin’!

 

 

 

 

Advertisements

Customizing SharePoint’s Modern Lists’ Forms

Ya know that awesome new interface we get in Office 365 called Modern Lists? Ya know how that’s not editable, or customizable, or extensible? Well, ya know it right! It’s not.

However…

modern_list

Purty Modern List

Above is a typical modern list, in all of it’s glory. Pretty right? But I want to add some of my own code to this and do some cool customizations. Currently, that’s only reserved for the classic list view:

classic_list

Yucky Classic List

I just threw up a little in my mouth. 

What if we took the classic view, and persuaded it to be modern, but keep the beauty of customizations? It’s just some good ‘ole CSS, and yes I’ll share.

Quick steps on what to do:

  1. Download this little CSS file (click here for project on github).
  2. Upload the CSS file to SharePoint somewhere, like your Site Assets library
  3. Create a quick HTML file with just a link to the CSS file, i.e. <link rel=”stylesheet” href=”/SiteAssets/classic_modern.min.css”></link>.
  4. Upload the HTML file to SharePoint
  5. In the library where you uploaded the files, right click on the HTML file, Get Link, then select Restricted Link, and copy that URL
  6. Navigate to your list.
  7. Ensure it’s in Classic mode, and will stay that way. Go to List Settings, then Advanced settings. Scroll all the way down to List Experience and select Classic experience.
  8. Navigate back to your list and create a new item.
  9. Use the cog in the top right, and select Edit page.
  10. Add a Content Editor Web Part and set the Content Link to the URL of your HTML file.
  11. Save it all and reload the page, BLAMO
  12. I have a more indepth walk through on how to do this using a JavaScript file here, same applies to a CSS file.

classic_modern_list

YAY!

The flow and feel of the classic form is a lot more like the modern form, but ’tis classic.

Some Notes

  • Terrifyingly enough, the CSS for the modern lists are on the pages themselves, not in a CSS file I can reference. So there was a lot of copy/pasting of CSS from a modern list to this CSS file.
  • Your classic list form will have the full ribbon, this CSS is primarily focused on the form interface for users.
  • This will not do anything on the list view pages, I haven’t bothered styling those yet.
  • If you wanted to, you could put this CSS into a global CSS file so all classic lists will have similar interfaces.
  • This CSS is not all inclusive, it should get you most of the way there. If you do add to it, please feel free to share on the github project, or send me the changes.

Thanks, and ’til next time Happy SharePointing!