One of our new clients was managing agenda items in excel and needed a better way to collect ideas for agenda items and manage them through the meeting effectively.
The following high-level requirements were:
Create a branded app to handle meetings and agendas
View all meetings in a calendar view.
Users see all upcoming meetings they organised or are invited to
Users can create new agenda items for the meeting
If the user didn't organise the meeting, added items go for approval
Agenda items can be re-organised easily
Agenda items can be deleted by the organiser or the person who submitted them
Agenda items can have more than one attachment that should display in the app but also be able to launch in the relevant desktop client or web.
Users can use the app to create a meeting, see the availability of team members and add a meeting room.
Ensure the time of the agenda items didn't overrun the total meeting time.
We managed to create this app in a couple of days and it has gone down really well and helped the client better manage meetings at a low cost. In this example, I am going to show you how to do one specific element of the app, item ordering in Power Apps!
Creating the List and App
First, I need to create a basic list in SharePoint to handle the agenda items. I've kept the Title as is but added an Order column and a Minutes column.
[In the customer example, we linked this up to the calendar of the user allowing them to create items for meetings that were in their outlook]
Next, I headed over to Power Apps and created a canvas app and connected it to the list.
I like to work with data locally in PowerApps so I created a collection to handle the data processing.
I then set the Gallery's Items property to the local collection and ordered by the Order column and styled it with the photo of the person who created the agenda item, the Title of the agenda item, the length of time and some text to show "X out of X items"
Next, we needed to be able to add functionality to reorder the items either up or down the list. We also needed to be able to remove an agenda item from the list. The key thing here however was to make sure the Order number was updated to reflect any of these changes.
To the right of each item in the gallery, I added the following elements:
A label to show the agenda item number (set to ThisItem.Order)
An up arrow to move items up the list
A down arrow to move items down the list
A trash icon that removes an item from the list completely.
Setting Display Modes
First, I know that if an item is at the top of the list or the bottom I don't want the users to be able to select it as there's no need. So I set the display property on these icons to the following:
Up Arrow:
If(ThisItem.Order= 1,DisplayMode.Disabled, DisplayMode.Edit)Down Arrow:
If(ThisItem.Order= Last(SortByColumns(localordering,"Order0",SortOrder.Ascending)).Order,DisplayMode.Disabled,DisplayMode.Edit)Adding agenda items
This was relatively straightforward. To do this, we simply created a form and when a user clicked on "Add agenda item" we displayed it with the form properties set to "New Form". Once submitted, (if not doing approval) we simply refreshed the collection with the new data from SharePoint.
Moving agenda items up
To move agenda items up the list we used the UpdateContext and Update functions
Set the OnSelect property of the up arrow to the following:
Select(Parent);
UpdateContext(
{
PreviousRecord: LookUp(
localordering,
Order = ThisItem.Order - 1
)
}
);
Update(
localordering,
PreviousRecord,
{
ID:PreviousRecord.ID,
Title: PreviousRecord.Title,
Minutes: PreviousRecord.Minutes,
Order: ThisItem.Order
}
);
Update(
localordering,
ThisItem,
{
ID: ThisItem.ID,
Title: ThisItem.Title,
Minutes: ThisItem.Minutes,
Order: PreviousRecord.Order
}
)This formula swapped the agenda item's order number with the one above it.
Moving agenda items down
To move agenda items down the list we used the UpdateContext and Update functions
Set the OnSelect property of the up arrow to the following:
UpdateContext(
{
NextRecord: LookUp(
localordering,
Order = ThisItem.Order + 1
)
}
);
Update(
localordering,
NextRecord,
{
ID:NextRecord.ID,
Title: NextRecord.Title,
Minutes: NextRecord.Minutes,
Order: ThisItem.Order
}
);
Update(
localordering,
ThisItem,
{
ID: ThisItem.ID,
Title: ThisItem.Title,
Minutes: ThisItem.Minutes,
Order: NextRecord.Order
}
)This formula swapped the agenda item's order number with the one below it.
Deleting agenda items
To remove an agenda item, we needed to ensure all items below the item being removed were updated. To do this, we needed to first set a variable of the item being removed. Once done, we could remove the item from the collection and update all items if their order number was greater than the item we just removed. I also wanted deleted items to be removed from the associated SharePoint list when performing this action.
Set(varitemremoved,ThisItem.Order);
Remove(
localordering,
ThisItem
);
Remove('List Item Ordering Demo', LookUp('List Item Ordering Demo', ThisItem.ID=ID));
UpdateIf(localordering,Order>varitemremoved,{ Order: Order - 1 })Submitting all changes back to SharePoint
OK, so excluding the deleted agenda items which are instantly removed from SharePoint, we now need to update the SharePoint list with the new order. This needs to be done so next time someone loads the app, the latest order is pulled through.
To do this, I created a button and set the "OnSelect" property to the below formula.
Patch('List Item Ordering Demo',
ForAll(localordering,
{
ID: localordering[@ID],
Order: localordering[@Order]
}
)
)
This was one part of the application build process, but there are many use cases for this type of functionality in apps! Why not give it a go and let the team at Dapt know how you got on?
Comments