PowerTwitter

PowerTwitter is a pixel-by-pixel implementation of Twitter’s homepage in a canvas PowerApp.

  • Application features:Full use of the Twitter’s connector
  • Sentiment analysis using Azure’s Text Analytics API
  • Light and Dark themes

The idea behind this project was to showcase the many possibilities when designing user interfaces for Canvas apps. You can learn by example on how to create rounded user dialogs, display a shade for zoomed images / dialogs, handle theming of your app and explore the fully potential of the flexible height gallery.

User dialogs and shades for zoomed images

As in popular image editing applications as PowerPoint itself, PowerApps lays all screen elements as layers. Depending on the localization of an element in the screen distribution panel it will be on top or behind other elements of the same screen.

Shade group acting as an overlay
In this example, the ShadeGroup is on top of the Twitter timeline acting as an overlay

We could take advantage of this feature by hiding elements, and only making them visible when we need them, for example, to display confirmation dialogs or to create a shade for zoomed images.

Handling themes

Every control’s color attribute is defined inside their own properties. These attributes can be set manually or they can be linked to a variable. By linking them, we can have our own theme structure like so:

Set(
     CurrentTheme,
     {
         LightTheme: true,
         PrimaryColor: ColorValue("#FFFFFF"),
         SecondaryColor: ColorValue("#FFFFFF"),
         PrimaryTextColor: ColorValue("#14171A"),
         SecondaryTextColor: ColorValue("#657786"),
         BorderColor: ColorValue("#FFFFFF"),
         BackgroundColor: ColorValue("#E6ECF0"),
         DividerColor: ColorValue("#E5EBF0"),
         HeaderColor: ColorValue("#EFF1F2"),
         SearchColor: ColorValue("#F5F8FA"),
         HeaderSearchColor: ColorValue("#FFFFFF"),
         AccentColor: Blank()
     }
 );

Then, we could use this structure in each control color property:

Setting control color properties
Setting control color properties

Finally, we could change the whole application theme by just changing one variable.

Voilá, we got themes
Voilá, we got themes

Flexible height gallery

Flexible height gallery

This type of gallery is a bit tricky to handle, but as it’s name implies, it’s a flexible solution for displaying data that might have different heights on a given gallery. Basically, It grows or shrinks depending on the contents. To accomplish this, we set it’s height based on calculations.

For example, when using a text label we can set the Auto height property to true for it to grow / shrink depending on the content. This suits well on PowerTwitter for the tweet messages or when the tweets have images embedded. For controls that doesn’t have the auto height we could use formulas like this to control it’s height:

If(
    !IsBlank(Image),
    600,
    0
)

Scrollable screen

scrollable screen
Creating a new scrollable screen

This fairly documented screen gives you the ability of having a whole section that scrolls independently of the main screen. This allows the creation of a screens that could, for example, have the need of a header section that is locked on top of the screen.

This screen automatically creates a canvas control ( Fluid Grid ) that scrolls independently from the main screen. As you can see in the following image, to simulate the scrolling mode of Twitter’s homepage we used this screen type:

Scrollable screen
Scrollable screen

This is just the surface of all the things you could learn or take as an example from PowerTwitter. I hope you like it, I really loved creating this PowerApp.

Want to take it for a spin? check out the repo on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *