Todd Baginski is a eleven-time Microsoft SharePoint Server MVP, O365 and SharePoint Top 25 Influencer, and Sitecore Certified Professional Developer whose blog focuses on Microsoft SharePoint, Office 365, Azure, Mobile, Office, and cloud technologies.
Have you seen the Leave Request PowerApps sample template?
The Leave Request PowerApps sample includes the following functionality:
– Employees can create leave requests and submit to their managers.
– Managers can easily administer leave requests in a unified view.
– Easily track leave status, prominent company holidays and leave balance
In this video I demonstrate how to use the ConfirmExit property to prompt your users before they close a PowerApp. This can be especially helpful to ensure your users finish what they are working on before unintentionally exiting the app before they are done with their work.
You can learn more about it here on the PowerApps documentation page.
Do you have this warning message in your PowerApps environments?
This environment contains a previous version Common Data Service database. This database and any apps or flows that depend on it must be upgraded to the new Common Data Service for Apps database before March 15, 2019.
If you do, this video might help you out. In this video I show how to delete a previous version of a CDS database.
DO NOT USE THIS APPROACH IF YOU HAVE POWERAPPS IN YOUR ENVIRONMENT THAT USE CDS.
HOW TO: Delete a previous version Common Data Service (CDS) Database - YouTube
Here’s a link to the MS docs that also describe this process.
In this article I’m going to dive into the sample code and show you how to implement responsive layouts with SharePoint View Formatters.
In this article, I’ll use the Resource Catalog sample as an example. The Resource Catalog sample looks like this in a desktop web browser. You can see it fills the screen from left to right.
In a tablet device it looks like this. The same layout is implemented and the content fits in the more narrow view port.
In mobile devices it looks like this. Here the layout changes and the content is displayed in a stacked layout.
Finally, what about when you add a web part to a SharePoint page to display the list? Here’s an example of what that looks like in a Modern Site. Notice the content fits nicely into the web part. In this example, the layout is the same as the tablet device example.
Note:It’s imperative that you think about the web part use case when making View Formatters. You never know when someone will add a web part to a page to display the lists you apply View Formatters to.
To implement the responsive design, use CSS and HTML in the View Formatter JSON. This is the same pattern used to create responsive web sites.
Looking closer at the code, you can see the top level HTML element used to define the outer container for each row (the DIV shown in the JSON View Formatter code in the green box shown below) uses a variety of CSS styles (shown the the gold box) to implement the responsive design.
Now, let’s connect the dots… In the image below you can see how the HTML and CSS Styles actually appear when they are rendered in the web page. Notice the green markup on the image that shows the HTML element (the DIV) in the code and in the web browser. Also, notice the gold markup on the image that shows the CSS classes that are applied to the DIV.
Now, taking it to the next level, you can see the children element in the View Formatter JSON (green box in image below). It also defines a DIV. This DIV is used to display the content for the top portion of each row. You will also see another children collection and additional elements below it. This screenshot is only a partial view of all the HTML elements in the sample, there are many children elements used to implement the user interface. Again, CSS styles (in the gold box) are used to implement the responsive behavior.
Just like I demonstrated earlier, here you can see what it looks like in the web browser and how the styles correlate to the HTML and CSS used to render the view.
To sum it all up, to create responsive SharePoint View Formatters simply use HTML and CSS just like you would to create a responsive web site.
Expert Tip: Use Office UI Fabric Styles to style the content whenever possible. This helps you match your user interface to Office 365. You will see in the samples where we used the Office UI Fabric Styles wherever we could. For example, we set the background color for the top level DIV with an Office UI Fabric Style, like this.
Keep in mind, depending on your design, you may have to use styles that are not part of the Office UI Fabric Styles, just like you see in this sample.
The Shoutouts PowerApps Sample Template (get it on https://web.powerapps.com) allows you to send messages and badges to your co-workers for a job well done. In this video I demonstrate how to customize the badges. You can add your own badges and replace the existing badges. It’s very easy to do. Check out the video for a complete walk through that describes the process.
HOW TO: Customize badges in the Shoutouts PowerApp - YouTube