Build your first PowerApp with Office 365 and Twitter

In case you haven’t heard, Microsoft PowerApps is now in private beta.

This article walks you through creating your first PowerApp that connects to Office 365 and Twitter.

awesomesauce

Overview

What the app does

This proof-of-concept app will let you:

  • Manage a custom list in SharePoint Online, including all CRUD operations
  • Select a list item and tap a “Tweet” button to tweet out data stored in the list item’s fields

What you’ll learn

And when you’re done building it, you will have learned how to:

  • Create a new PowerApp
  • Connect to a list in Office 365 SharePoint Online
  • In your new app:
    • Add a screen and navigation controls
    • Add, edit and rename controls like buttons and text fields
    • Use formulas to format text in control values
    • Pass control values between screens
  • Connect to Twitter with your account
  • Create a new Logic Flow that:
    • Starts when you tap a button in your app
    • Accepts a parameter
    • Tweets using your Twitter account
  • Update your new PowerApp to:
    • Compose a tweet
    • Pass text from a SharePoint list item into the tweet text
    • Post the tweet to Twitter by calling your Logic Flow

 

Before you start

You’ll need PowerApps enabled on your Office 365 tenant (I was lucky enough to get my hands on PoweApps and start playing with it because my coworker, Michael Blumenthal is an O365 MVP!), as well as a Twitter account for the tweeting functionality.

Warning: this is a low-fi proof of concept with limited functionality.  But if you want to create your first PowerApp, connect it to a SharePoint list in Office 365, and tweet out some of your list content, keep reading!

You’ll also need to get a few things in place before you build your first app.

Create a SharePoint list

We’re going to build an app that connects to a SharePoint list, so you’ll need a list to play with.  I created a list in our SharePoint tenant called “Speaking Gigs” to track speaking events booked by my coworkers, then added a few basic columns (column type in parentheses):

  • Date (Date and time, date only)
  • Speaker (Person or group)
  • Description (Multiple lines of text; 6 lines of plain text)

I created one entry in the list, too:

List form

That’s all on the SharePoint side for now.

Install PowerApps

Once your tenant is configured with access to the PowerApps beta, you should be able to sign into the PowerApps portal.  You’ll also need to install the PowerApps app on your machine.

Part 1: SharePoint Online

First, we’ll build the part of the app that connects to SharePoint Online.  If you don’t care about Twitter integration, you can stop reading at the end of this section.

Connect to SharePoint Online

When you spin up the PowerApps app on your machine for the first time, you’re given the option to start from a template, start from your data or start from scratch.  We have a data source– our SharePoint list– so choose “Start from your data”:

Initial

Next, you’ll need to add a connection.  Click “Add a connection”:

Add a connection

If you’ve ever used IFTTT, this might look a little familiar: you can choose between some common services to which your PowerApp can connect.  Our first connection will be to our list in SharePoint Online, so select SharePoint Online from the list of available connections and click “Connect”:

Choose a service.png

You’ll need to sign in with your Microsoft or Organizational account:

Connecting to a service

Next, add the site on which your list resides by clicking the “New site” tab under “Select a site”.  You don’t need to type the full URL to your list– just the site URL will do:

Select a site

Click “Connect” in the bottom right-hand corner.  When PowerApps connects to your SharePoint site, you’ll be shown the lists that you can access.  I easily found the “Speaking Gigs” list I created just moments ago:

Select a list

Click “Connect” and PowerApps will start to build your app– no, really!

Building your app

When it’s done, you’ll see your new app (which already shows the list item you created!):

New app

Run your new app

Now is a great time to run your shiny new app.  Click the little “Play” icon in the upper right side of the screen:

Play

I was pleasantly surprised at the functionality available right out of the box: I could view list items, select an item to view its details, edit the list item, and even create new ones:

Pause for a second and reflect how easy it was to create a simple mobile app that performs CRUD operations on a SharePoint list!  Powerful, no doubt– but it isn’t without its weaknesses:

  • The “Date” field is a text box, not a date picker control, and it’s displayed as a full UTF DateTime string
  • The default screen shows the “Description” field instead of the “Title” field (a little strange if you ask me)
  • The “Speaker” field is simply not there!

Change the Description field to show the Title

Let’s address some of that weirdness.  First, it makes a lot more sense to show a speaking gig’s Title than its Description.  Click on the control at the top of the canvas that’s showing the Description field.  Notice that in the formula bar, the fx section shows “Description”:

Description field.png

Place your cursor in the formula bar (next to fx) and replace “Description” with “Title”.  As you start to type, the formula bar suggests some fields from the list.

Replace description with Title

Select (or keep typing) “Title”.  The contents of the control are now replaced with the list item’s Title instead of its Description.

Title

Add the Description field

Actually, it still makes sense to show the item’s Description— just not in bold at the top of the row.  Let’s add another control to show the description.  Select the “Insert” tab–> “Text” –> “Label” to insert a new label onto the canvas:

Insert label.png

Boom!  Your new label is already hooked to the Description field!  Why?  I don’t know– for some reason, that seems to be the default field.  Selecting your newly-inserted control shows something new and interesting in the formula bar: the formula for this control is ThisItem.Description:

 

ThisItem.Description

This is useful for adding controls in the future– if you want to quickly add item fields, typing ThisItem.[FieldName] is a good start.  You can even replace “Title” with “ThisItem.Title” for the Title control and the results are the same.

Format the Date field

Let’s take care of those date controls before your eyes bleed out.  First, delete the two left-aligned controls that show dates, leaving the control at the bottom of the row.  This will be the control we use to show the date of the speaking gig.

Select the right-aligned control at the bottom of the row, then click the “Home” tab–> {align icon} –> {align left} to align the control on the left side of the row beneath the item Description.

Left align.png

The biggest problem with this control isn’t its alignment– it’s the UTF formatting.  With the control still selected, click the “Align” dropdown next to the formula bar and select “Text” instead of “Align”.  The text is set to “Date” (or ThisItem.Date, really).

We need to format it using the “Text(value, format_text)” function.  Replace Date in the formula bar with Text(Date)— the formatting of the control doesn’t change!

No change.png

That’s because the “Text(value, format_text)” formula needs a date value, not a text value, in order to format the date, and apparently the UTF-formatted date in the Date field is returned as text.  No matter– we just need to nest one more formula.  Replace Text(Date) with Text(DateValue(Date), “mm/dd/yyyy”), including the quotes around “mm/dd/yyyy”. This time, the format of the control changes as expected:

DateValue.png

Hey, listen!

The formula evaluation for the Date formatting (eventually) started crying foul with this formula:

Strange

I’m guessing this is a bug, because the formula still works.  I’ll blame it on the whole “private beta” thing 🙂

Change the theme

If you work in the consulting industry as I do, you know that no client is ever happy with the out-of-the-box SharePoint color scheme.  Lucky for the picky-packy’s among us, PowerApps provides a simple way to change your app’s UI.

Click “Design” tab –> “Theme” and select a new, obviously-better theme:

Change theme

With the new theme applied:

Themed

Next, we’ll shift focus to building a logic flow that allows you to tweet from your Twitter account.  If the mere thought of Twitter makes you #literallycanteven, then feel free to stop here or skip to the “run the app on your mobile phone” part.

Part 2: The Twitter

In order to add some Twitter integration, you’ll need to add a connection to your Twitter account.

Connect to Twitter and authorize PowerApps to tweet on your behalf

Start by clicking File –> Connections –> Add a connection:

Add Connection 2

Select “Twitter”, then “Connect”.  You’ll be prompted for your login credentials or, if you are already signed into Twitter in a browser session, simply prompted to allow access to your account.  Click “Authorize app”:

Authorize

You should now see your Twitter connection on the “Connections” screen (File –> Connections):

Connections

Create a new Logic Flow

A lot of the promised *cough* power of PowerApps lies in its workflow capabilities, called Logic Flows.  Logic Flows can listen to your connections and execute actions with them– here, we’re going to execute the “Post tweet” action for the Twitter connection you just created.

To create a new Logic Flow, click File –> Logic Flows –> Create a new Logic Flow:

New Logic Flow

This will open… your web browser.  Looks like the logic flow functionality isn’t built into the PowerApps desktop client yet!

Choose “Create from blank”:

Create from blank.png

Next, you’ll need to choose the entry point for your Logic Flow.  We want to kick off the flow manually when we tap a button in the PowerApp, so choose “When a control is selected”:

When a control is selected.png

Click the little “+” icon beneath the first step to add a second step.  You’re presented with a search box, several choices and a “Load more” button.  I prefer to search for the action I want (I just started typing “Tweet”), but you can also click “Load more” a gazillion times until you find what you’re looking for.

Select “Post a new tweet”:

Load more

Post a tweet
Start typing “tweet” to quickly jump to the Twitter connection actions.

Of course, it wouldn’t be an app if we just hard-coded the text to tweet, so we need to tell the Logic Flow that we’re going to get the tweet text from our app.

Click inside the “Tweet Text” text box.  You’ll see an option to “Ask in PowerApps” for the text of the tweet:

Ask in powerapps.png

Clicking “Ask in PowerApps” automatically creates a variable for you and places it in the “Tweet Text” field:

Ask in powerapps2.png

All that’s left now is to save the Logic Flow.  Give it a name, then click “Done”:

Give it a name

The Logic Flow is now saved and accessible to your app:

Tweet it saved.png

Create a “Tweet” screen in your PowerApp

Here’s where the magic happens.  With your new Logic Flow ready to go, back in the PowerApps desktop client, click the “Home” tab and select “New Screen”.  We’ll use this screen to compose our tweet:

New screen.png

Your new screen is added to the storyboard.  Now is a good time to rename the screen something other than “Screen1”, so click the tags icon next to “Screen1” in the “Home” tab and rename the screen to “TweetScreen”:

For the text of the tweet, add a text field to the canvas.  Click the “Insert” tab –>  Text –> Input Text:

snip_20160119092300

We could easily allow the user to enter anything they want into this text input, but where would the fun be in that?  Let’s pre-populate the field with some text from our SharePoint list item.

Pass control values from one screen to another

Navigate back to the “DetailsScreen” screen in your app by selecting it in the left navigation pane.  This screen shows the details of the current list item in controls for the list item’s TitleDate and Description; it’s also the screen to which the user is navigated automatically after creating a new list item.

Seems like a good place to put our “Tweet it” button that will (1) navigate the user to the new “TweetScreen” we just created, and (2) pass some of the list item’s metadata into the input box.

Hey, listen!

Every control in PowerApps has a unique name that persists across the entire app.  This allows you to grab the value of a control from any screen.

Let’s change the names of the controls on the “DetailsScreen” screen to make it easier to find them and use their values on the “TweetScreen” screen.

Select the text label beneath the Title label.  With the “Home” tab selected, change the name of the control to “TitleValue”.  Be careful to select the control beneath the label– this is the control that displays the value of the list item:

RenameTitle

Do the same with the Date and Description fields, renaming the controls to “DateValue” and “DescriptionValue” respectively.

Add a button to navigate the user to another screen

The control values are ready to pass to another screen, but how will the user get there?  Add a button to the “DetailScreen” canvas by clicking the “Insert” tab –> Controls –> Button:

InsertButton

A new button is added to the canvas.  Double-click it to edit its label, and rename it “Tweet…”:

Renamebutton

Next, select the button on the canvas and change the dropdown next to the formula bar to “OnSelect”.  You can select from the dropdown, or begin typing “OnSelect”:

Onselect.png

We want the screen to navigate to our new “TweetScreen” screen when the button is clicked.  To do this, we can use the Navigate(target, transition…) command that accepts two parameters:

  1. The screen to which the user should be navigated when the button is clicked
  2. The transition to use

In the formula bar, type “Navigate(“.  After typing the “(“, you are presented with several screens to which you can navigate.  Keep typing the name of the screen– in this case, “TweetScreen”– until you can hit “Enter” to autocomplete the screen name:

Navigate.png

Next, provide the transition parameter.  Type a comma after “TweetScreen”, and you’ll be presented with the transition choices available:

Transition1.png

I chose the “Cover” transition.  Once selected, close the parentheses.  Your formula should now look like this:

Transition2

You can test your app by clicking the “Play” button.  Select a list item to navigate to the “DetailsScreen” screen, then click the new “Tweet…” button to navigate to the “TweetScreen” screen!

Add control values to a formula

Navigate back to the “TweetScreen” screen canvas and select the “TweetValue” control.  Select “Default” from the dropdown next to the formula bar, then start typing “Concatenate” because we want to use the Concatenate formula to join some default text with the values of the controls from the “DetailsScreen” screen.

The Concatenate formula takes an unlimited number of string parameters.  The first parameter we’ll pass it is hard-coded text, “I’m speaking about “:

Imspeakingabout.png

Next, we want the value of the TitleValue control from the “DetailsScreen” screen.  Unfortunately, simply typing the name of the control won’t suffice; we need to cast it as text using the Text formula:

concatenate2

Add a second hard-coded string ” on “, separated by commas, then grab the date control value, too.  Remember what we did to format it earlier using the DateValue formula?  Do the same thing here (a bit confusing because we also called our Date control DateValue; in the image below, one “DateValue” is a formula while the other, in red, is the control value).

Notice that you need to grab the “Text” value of the DateValue control by adding “!Text” after the control reference; I’m not sure why this is the case, but the formula will not compile without this change.  Maybe someone can tell me why in the comments!

Your final formula should look like this:

finalformula

Now that you read this far and typed the formula yourself, here’s the formula you can copy and paste 🙂

Concatenate(“I’m speaking about “, Text(TitleValue), ” on “, Text(DateValue(DateValue!Text)))

The TweetValue control on the “TweetScreen” screen should now look like this:

emptyformula.png

Add the button that calls the Logic Flow

Ok, here’s where the magic really happens.  Add a new button to the “TweetScreen” canvas and change its text to “Tweet!”:

tweetbutton.png

With the button selected on the canvas, click the “Action” tab –> Logic Flows:

Action.png

A pane opens to the right of the canvas, showing your saved Logic Flows.  Click the “Tweet it!” Logic Flow you created earlier.  A yellow bar indicates that the Logic Flow is being added to your button:

addlogicflow

When the Logic Flow has been successfully added, the yellow bar changes to indicate that you need to complete the Logic Flow’s parameters in the formula bar:

complete.png

In fact, the formula bar is already waiting for you to complete the action with parameters! The Logic Flow is referenced in the formula by putting its name in single quotes (‘Tweetit!’), followed by the .Run( command.  The formula bar also shows you the parameter the Logic Flow is expecting– in this case, Postanewtweet_Tweettext:

incompleteformula.png

The next part is super easy: just send the value of the TweetText control on the “TweetScreen” by typing “Text(TweetValue)”.  Your final formula should look like this:

TweetIt

You’re done!  Well, almost– we still have a few cleanup tasks to complete, but you can test your app now by navigating to start screen (“BrowseScreen1”) and clicking the “Play” button.

Play1.gif

Check your Twitter timeline!

Tweet.png

Add automatic navigation after the tweet

Sweet, right?  Well, you may have noticed that once you tap “Tweet!”, you don’t have a way to get back to the details screen.

It makes the most sense to redirect the user automatically after tapping the “Tweet!” button, because there’s really no reason to stay on the “TweetScreen” screen once the tweet is sent.  In fact, you’d probably want to notify the user that the tweet was posted successfully, but that’s too complicated for our proof of concept.

To redirect the user back to the previous screen after the “Tweet!” button is tapped, we can daisy-chain a second action to the “OnSelect” button action.  With the “Tweet!” button selected, add a semicolon (“;”), followed by the Back formula (which takes a “Transition” parameter, just like Navigate):

back.png

Add a “Back” button

Finally, we need to add a “Back” button to the “TweetScreen” screen just in case the user navigates to the screen by mistake or ultimately decides not to tweet.

Add an “Image” control to the canvas (“Insert” tab –> Image).  You’ll notice that “Image” is selected in the dropdown next to the formula bar, with its value set to “SampleImage”.  You can change this value to “arrow” and resize the arrow image so it fits in the upper-left corner of the screen:

image

Select the “OnSelect” action from the dropdown menu next to the formula bar and erase the default “false” value in the formula bar.  Once again, use the “Back” formula.  This time, use the “Uncover” transition:

backbuttoncomplete

You’re done!  Preview the app from the main screen to test your new navigation.

awesomesauce.gif

Part 3: Run the app on your mobile device

All that’s left now is to download PowerApps from your device’s app store and run your app.  On my iPhone, the process was pretty straightforward.

Sign into PowerApps

Sign in with the same O365 ID you used to create the app.

Open your app

Once signed in, you’ll see your new app in the Apps tab.  Just tap it to open it.  You’ll need to authorize it again to acknowledge that it can use your service connections.

Profit!

Your app is ready to use.  Go ahead and give it a try, then imagine all of the wonderful things you can do now that you know how to build a PowerApp and a Logic Flow…

Wrapping it up

PowerApps isn’t ready for primetime yet (it’s still in beta) but the concept is pretty awesome.  I’m sure that a few of the kinks– like the lack of a Date or Person or Group controls, connecting to SharePoint lists with custom controls (I got an error when attempting to do this), and the occasional crash– will be ironed out soon enough.

We built an extremely simple app that doesn’t even begin to scratch the surface of what PowerApps can do.  I’ve played with a few things, like creating a Logic Flow that listens for tweets with a specific hashtag, sending email, and adding a Camera control to a PowerApp…

camera.png
Still haven’t figured out how to use the picture from the camera.

 

In short, I’m excited to see what PowerApps can do.

Advertisements

1 thought on “Build your first PowerApp with Office 365 and Twitter”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s