SOLVED

Designing the Microsoft Lists experience

%3CLINGO-SUB%20id%3D%22lingo-sub-1696791%22%20slang%3D%22en-US%22%3EDesigning%20the%20Microsoft%20Lists%20experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1696791%22%20slang%3D%22en-US%22%3EJoin%20in%20and%20learn%20how%20the%20Microsoft%20Design%20team%20behind%20Lists%20approached%20designing%20a%20new%20List%20app.%20You'll%20learn%20more%20about%20the%20problems%2C%20principles%20and%20approaches.%20In%20deep%20dives%2C%20you'll%20see%20how%20they%20designed%20simple%2C%20beautiful%20UX%20that%20helps%20people%20be%20productive%20every%20day%2C%20with%20a%20strong%20focus%20on%20accessibility%20and%20inclusion.%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1696791%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EContent%20%26amp%3B%20Collaboration%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20365%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Microsoft

Join in and learn how the Microsoft Design team behind Lists approached designing a new List app. You'll learn more about the problems, principles and approaches. In deep dives, you'll see how they designed simple, beautiful UX that helps people be productive every day, with a strong focus on accessibility and inclusion.

22 Replies
Highlighted
Nothing covered about the list form experience. How do we format the list form into sections with headers and rearrange fields?
Highlighted
Best Response confirmed by Carlos Perez (O365) (Microsoft)
Solution
Hi Chris!
You can find out how to use JSON to create sections, headers, and footers in your form here: https://techcommunity.microsoft.com/t5/video-hub/organize-business-information-with-microsoft-lists/...

About 31 minutes in MIceile talks about that.
Highlighted

@Chris ,

I made sample JSON header and footer files that can get you started. You can replace the icon by finding the icon name and inserting it into the iconName reference.

Highlighted

@Chris Knight You can do a little bit with the default SharePoint form but for major formatting, you'll need to customize the list form with Power Apps.

Highlighted

@Rachel Davis true! @Chris Knight, You can find access to PowerApps in the form under the "Configure" icon. It's the two panes and pencil one. There's "Configure layout", which is the in app JSON editor, and what Rachel mentions is "Customize with PowerApps". That will take you to the PowerApps editor where you start off with the basic look and functions, but can add all kinds of customization. It's pretty powerful.

Highlighted

@Ben Truelove   Thanks  

 

I can't see the configure icon, I think my tenant doesn't yet have the latest version. 
 
When opening a form from a spo list, it still opens on the right and not full screen; will this change?
 
In Teams I have lists but can't see how to edit the form - so the form has the word Header but we can't even change it so it makes sense. 
 
A bit anoying when things are rolled out but not finished fully or is there a way to access the list and form outside of teams, so I can add Json?
Highlighted

@Chris Knight , 

That's unfortunate about your tenant.

 

No, the form will still open on the right in SharePoint and the Lists app.

 

You can open a list in Teams inside the Lists App. If you go to the Office app button (Waffle), it will appear in that menu. From there you should be able to add JSON, or use PowerApps to customize your form, depending on what release your tenant is on.

 

I hope this helps. 

Highlighted

@Chris Knight  - You don't want the form to open full screen. It used to do that back in the day and it was the most annoying thing ever because it meant you couldn't move from one item to another. Open form, close form, next item, open form, close form next item.

 

By having the form in the right pane, you can simply hop from one line item to the next with the pane open. Just click the LINE for the next item. Not the selection bubble or the title field, click the LINE. This way you can jump from one item to the next.

 

As for your list in Teams, simply open the SharePoint site in back of your Team, create/edit your list as usual, format your columns & views, etc. Then add the list to your Team by putting it in a tab in a channel with the SharePoint connector. I've been doing it that way for a couple years now. You don't need the list app for that.

 

Very little of the actual list functionality is new. Most of it already exists in SharePoint. It's nice to have a central hub for all my lists and I like the UI changes and some of the new templates. But other than the new rules, most of it already exists in SharePoint.

Highlighted

@Rachel Davis  But our users don't like the narrow form as have to scroll down to see all the info.  In the teams app, the form opens in full width - see image.   

Highlighted

@Chris Knight @Rachel Davis ,

That's sound advice Rachel, the SharePoint link would get you to the list outside of Teams faster. I do like to use the Lists App, mainly because I like that it doesn't have the left nav and site header, but just all list.

 

As for full screen in Teams, you can get a wider, multicolumn format in SharePoint and the Lists app by adding body JSON. Here's a snippet to just make it wide and multicolumn. If you use the header JSON I have, you'll want to set the bottom border of it to "0" as there's a border set by the section.
Hopefully you can either edit JSON or use PowerApps in your tenant at some point.

Screen Shot 2020-09-23 at 4.55.02 PM.png

Highlighted

@Chris Knight I think you have an education issue here rather than a technology issue. In my case, most people don't know they have the ability to move from one item to another with the pane open. Once I show them the reason WHY the form is locked to the right pane, They are thrilled with the new flexibility. 

 

This means we no longer rely so heavily on quick edit which in turn means I no longer have to have list views that show EVERY field. Now I can have views that show only the most important fields for sorting/filtering which means we've drastically reduced all the L-R scrolling.

 

Yes, of course, I've had a few stakeholders decide that the wide-screen custom Power App is higher on their priorities than easily jumping from item to item. But those are exceptions and it's a conscious, informed choice.

 

 

Highlighted

@Ben Truelove On JSON vs Power Apps

I've been noodling about Power Apps vs the JSON solutions you've shown to customize a form.

 

As SharePoint lead, I need to build things that I can hand off to the content owner and have them maintain it afterwards. Power Apps is a big improvement over InfoPath, but there's definite barrier in the hand-off area as Power Apps can have a significant learning curve.

 

Can you help me understand when JSON might be a better choice than Power Apps? Where's the decision line where I choose one over the other? 

 

P.S. My JSON skills are limited to copying something from GitHub, pasting in my own values and putzing/cursing until it works. So major coding in JSON would require actually learning JSON.

 

P.P.S Thanks for the session. Clearly it's given me alot to think about. 

 

 

Highlighted

@Rachel Davis,

Yes, being a designer, I'm not the most adept at coding, especially JSON, with it's more difficult structures, though I've heard our team has made some of that simpler.

 

I would say use PowerApps when you want to do lots of customizations, such as conditional fields, background colors, custom stylings, and totally different layouts.

 

I would use JSON when you just want to make a modestly different header, or footer, make it multicolumn and wide, or add content sections.

 

I do get your dilemma, it's kind of a rock and a hard place. I can see what I can do for providing some different kinds of JSON and honestly it would be good to have a primer on how to use it and what fields to edit. Usually at some point though, we provide a UX for this sort of work, much like we did for column formatting, which started as JSON only.

Highlighted

@MelissaBathum 

How would the new Microsoft Lists differ from the current view of SharePoint lists when connecting to Outlook? Allowing a way to build and sync Custom Contact lists and turn into Address Books.

Highlighted

@MelissaBathum How come I'm not able to access MS Lists through my tenant's O365 portal? I can only seem to get to this app through Teams...I would really like to start building rules around the lists I have created as I believe it will solve a business problem we've been having at my org for years. Please advise.

Highlighted

Hey, @Becky_Sand,

If you tap the "..." next to the title, you'll get a command called "Open in SharePoint". 

 

From there you can go to "Automate" and create a new rule. Hope that helps!

Highlighted

Hi @Ben Truelove yes I saw that was there but what I'm looking for is more like the attached image...

MS Lists UI_Create Rule.jpg

Highlighted

@Becky_Sand 

Yes, if you click on "Automate" in the command bar in SharePoint, and then "Create a rule", you will get that. Attached. You're right there :)

Highlighted

@Ben Truelove I don't have the "create a rule" option

Session Resources