Friday, June 7, 2019

Upload an app package to Microsoft Teams

Enable an option "Upload a custom app" in MS Teams

By default the option for uploading the custom app is not enabled for security reasons however you can enable it easily using following steps.

Go to the O365 Admin center

Click the Settings and then Services and add-ins it will open the available services page, click on Microsoft Teams

It will open the detailed settings for the Microsoft Teams service. Click the Apps section and scroll down till you see the option "Allow side loading of the external apps"

Enable this option and click Save

Once the settings are saved wait for couple of minutes and then refresh the Teams.

Check if the option "Upload a custom app" is available. if still you can't see the option wait for couple of minutes and check again. Normally it takes around 5-10 minutes to refresh the setting in Teams.

Tuesday, June 4, 2019

PowerApps Add Picture as attachment

PowerApps - Upload Image as List Attachment and display them in Apps.

Business scenario:

User wants to upload the pictures from their phone and attach them to the post. The post is a SharePoint list item, user can add multiple pictures per post. Once the upload is successful user want to see the uploaded pictures in PowerApps.

Solution:

I have used the Flow hack described in the Community call demo here to upload the picture (as attachment) selected by user using "Add Picture" control. Thanks to @chakkaradeep for a trick of Byte and Binary which is working perfectly fine for me.

App step by step

Create a blank App and add 2 screens in it.

Screen 1 will contain a gallery control which will display the items from SharePoint list

Add Button control for new Post, OnSelect will navigate to Screen 2.

Screen 2 will contain the fields for required information and a Add picture control.

Add Button to Submit the Post or Image to existing Post. Please find the detailed code below:

This code checks if the "selectedItem" is blank, if yes then this is new Post else it is for adding the image to existing post. After that Patch code is invoking the Flow with parameters.

Please add following code to OnSelect of Pin icon in Gallery 1

Set(selectedItem, ThisItem.ID);
Navigate(Screen3,ScreenTransition.None);

If(
IsBlank(selectedItem),
ClearCollect(
submittedRecord,
Patch(
'List Attachment',
Defaults('List Attachment'),
{Title: TextInput1.Text}
)
);
Set(
uploaded,
AddListAttachment.Run(
AddMediaButton1.FileName,
UploadedImage1.Image,
First(submittedRecord).ID
).text
),
Set(
uploaded,
AddListAttachment.Run(
AddMediaButton1.FileName,
UploadedImage1.Image,
selectedItem
).text
);

);
If(
uploaded = "Yes",
Refresh('List Attachment');
Set(selectedItem, Blank());
Navigate(
Screen1,
ScreenTransition.None
)
);

Flow step by step

Create a blank flow with PowerApp as triggering action

Add a condition which will be always False (for more details watch the video)

In "True" path add an action "Send an email" and configure it as mentioned below:

In "False" path add and action "Add Attachment" and configure it as mentioned below
After it you may want to get the Response to PowerApp however its optional.

So far you will be able to upload a image as list item attachment. You can verify that from SharePoint list view. The problem displaying the attachment on an item is, the Attachment is a collection (Table type) hence you can use it on Image control added in Gallery. While playing with Gallery control I found that we can add a Gallery control with in Gallery control Voila !

Gallery in Gallery step by step

Select the Gallery 1 and Click on Edit icon

Insert a new Gallery control and set the Items property as below

Add remove other fields and keep only Image control in Gallery 2. Configure the Field property as below:

Now each item from Gallery 1 will display the attachments in Gallery 2.

Thursday, May 30, 2019

PowerApps push notification step by step.

Add push notifications to your app using Power Apps and Flows

Using Power Apps – step by step

Step 1: Create a simple blank Power App and insert an action button.
Step 2: Save the Power Apps and copy the Application ID from Application Details screen.

Step 3: Add a Data Source "Power Apps Notification" connector as below.

Step 4: Paste the Application ID for which you want to add the notification

Note that this is Preview connector hence its your decision whether to use it on PROD or not.

Step 5: Once the connector is added successfully, add the following code in "OnSelect" for action button. See this link for more information on the parameters.

PowerAppsNotification.SendPushNotification(
{
message: "You have new notification",
recipients:[User().Email],
openApp: true,
params: Table(
{
key: "Key1",
value: "Val1"
}
)
}
)

You can try multiple combination for the parameters. The recipients is the table of comma separated email ids or Object IDs for users or security groups in Azure Active Directory

Step 6: Save and Publish the Application. Run the Application and Click the action button.

Step 7: You will see the notification on device as below:

Using Flow – step by step

Step 1: Create a simple flow with manual triggering action.

Step 2: Add new Step "Send push notification"

Step 3: Configure the Connection for the Step as below:

Step 4: Configure the Step as below.

Step 5: Save and Test the Flow.

Step 6: You will see the below notification on device as below.

There are some limitation for this new connector.

No push notifications yet for users who only run apps in the web browser.
The notifications shows the Power Apps generic icon instead of showing the specific icon of the app.

Wednesday, May 15, 2019

How to filter Date field when querying SharePoint List

Business scenario is to select the list items which are satisfying the following criteria:

StartDate >= Today <= EndDate

The simple working code using PNP JS is as below:

let web = new Web(this.props.adminSiteURL);
let alerts: Alerts[] = await web.lists.getByTitle('Alerts').items
.filter(`StartDate le ` + new Date().toISOString() + `or StartDate eq ` + new Date().toISOString()
+ `OData__EndDate ge ` + new Date().toISOString() + `or OData__EndDate eq ` + new Date().toISOString()).get();
return alerts;

Survey / Feedback Power Apps with required field validation

Power Apps provides the Gallery control for navigation type view however we could not add a field validation on item navigation. Lets see how we can build navigation UI without Gallery control.

I had a functional requirement where user have to go through the multiple questions and each question will have some required fields to fill up before proceeding to next question.

I tried to utilize the Gallery control, it worked well except the requirement fill validation. Gallery control do not expose the Back / Next navigation action hence we can't apply the field validation.

I have achieved the same functionality using a collection, variables and some controls. To start with create the Canvas Blank App with Phone Layout. You can choose the other layout but it should be blank without template so that we can customize it as we wish.

Screen 1 (Welcome / App Start) Initialize your collection and variables as below:

Set(
_guideStep,
1
);
Reset(TextInput1);
Reset(Rating1);
ClearCollect(
Questions,
{
QuestionID: 1,
QuestionText: "First Question 1 can be bing enough to fit in the given space",
QuestionCategory: "Category 1",
Note: "",
Rating: ""
},
{
QuestionID: 2,
QuestionText: "First Question 2",
QuestionCategory: "Category 2",
Note: "",
Rating: ""
},
{
QuestionID: 3,
QuestionText: "First Question 3 can be bing enough to fit in the given space",
QuestionCategory: "Category 3",
Note: "",
Rating: ""
},
{
QuestionID: 4,
QuestionText: "First Question 4",
QuestionCategory: "Category 4",
Note: "",
Rating: ""
},
{
QuestionID: 5,
QuestionText: "First Question 5",
QuestionCategory: "Category 5",
Note: "",
Rating: ""
},
{
QuestionID: 6,
QuestionText: "First Question 6 can be bing enough to fit in the given space",
QuestionCategory: "Category 6",
Note: "",
Rating: ""
}
)

Screen 1, Add button with OnSelect = Navigation to next screen where we will display the questions.

Navigate(scrSurvey,ScreenTransition.None)

Screen 2, create the Layout similar to the screen shot below, you can add other controls as per your requirement.

Below are the details of each control and purpose.

Screen 2 OnVisible: We have to get the first item of the collection to display. Add the following code in OnVisible

UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)

Header Text: add the following code in "Text" field.

"Question: " & thisItem.QuestionID & "/" & CountRows(Questions)"

Category Text: add the following code in "Text" field.

thisItem.QuestionCategory

Question Text: add the following code in "Text" field.

thisItem.QuestionText

Rating control: add the following code in "BorderColor", "BorderThinkness"

If( Rating1.Value = 0 ,Color.Red, RGBA(166, 166, 166, 1))
If( Rating1.Value = 0 ,1, 0)

TextInput control: add the following code in "BorderColor"

If( IsBlank(TextInput1.Text),Color.Red, RGBA(166, 166, 166, 1))

Next Button Control: Add the following code in "OnSelect" and "Disabled Mode"

Patch(
Questions,
thisItem,
{
Note: TextInput1.Text,
Rating: Rating1.Value
}
);
Reset(TextInput1);
Reset(Rating1);
If(
_guideStep = CountRows(Questions),
Navigate(
scrFinal,
ScreenTransition.None
),
Set(
_guideStep,
_guideStep + 1
);
UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)
)
If(IsBlank(TextInput1.Text), DisplayMode.Disabled, DisplayMode.Edit)

Back Button Control: Add the following code in "OnSelect"

If(
_guideStep = 1,
Navigate(
scrWelcome,
ScreenTransition.None
),
Set(
_guideStep,
_guideStep - 1
);
UpdateContext(
{
thisItem: LookUp(
Questions,
QuestionID = _guideStep
)
}
)
)

Additionally, if you want a cool progress indicator follow the steps below: