Designing the Microsoft Lists experience
Published Sep 21 2020 07:52 PM 36.7K Views
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.

38 Comments
Brass Contributor
Nothing covered about the list form experience. How do we format the list form into sections with headers and rearrange fields?
Microsoft
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.
Microsoft

@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.

Steel Contributor

@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.

Microsoft

@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.

Brass Contributor

@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?
Microsoft

@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. 

Steel Contributor

@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.

Brass Contributor

@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.   

Microsoft

@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

Steel Contributor

@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.

 

 

Steel Contributor

@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. 

 

 

Microsoft

@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.

Copper Contributor

@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.

Copper Contributor

@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.

Microsoft

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!

Copper Contributor

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

Microsoft

@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 :)

Copper Contributor

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

Microsoft

@Becky_Sand , 

Oh no. Maybe it's not in your tenant yet. Do you have the Automate menu at all when in the SharePoint version of the list?

Copper Contributor

@Ben Truelove Yes I have the Automate menu but the only choices are 'Create a flow', 'See your flows', and 'Configure flows'. Unfortunately it looks like I have to wait until next month for my tenant to update (hopefully it's sooner rather than later in the month).

Microsoft

@Becky_Sand 

I hope so as well! It's a game changer.

Copper Contributor

Hi @Rachel Davis ,

 

I'D like to use the sharepoint form with some little JSON customization as you outlined already. We are interrested in the sections formatting, but the "Configure layout" - option does not exist in our dropdown (Edit Form).

editForm.PNG

 

Is it possibe to do the manipulation on sharepoint as well? 

Is there a special setting needed on the tenant (we use a europe tenant)?

We tired to overcome this situation by using the Form Webparts, but even these are not working.

 

PowerApp's is not an option, because the maintanance effort is too high. 

 

It would be great if you have an idea.

 

Thank you in advance.

 

Microsoft

@ziro1 It doesn't look like it's in your tenant right now. 

Brass Contributor

Loving the direction that Microsoft Lists is going. I hope we see more no-code front-end design and customization options for list forms, instead of having to use complicated JSON or Power Apps, especially for more simple apps.  That's one of the main feedbacks I've heard from employees trying to customize simple forms, but they're loving it otherwise so far.

Microsoft

@JPJPJP thank you! That's nice to hear. We're always looking for ways to make lives simpler, and it's understood that coding experience does not equal (!=) need for custom panels :)

Iron Contributor

@MelissaBathum How is the "Employee onboarding" list template supposed to be used? It seems like the items that you have defined in the rows should be defined as the columns instead. I don't understand how you would make use of your list template to track the onboarding for multiple instances of employees being onboarded. With your setup, it seems like you would have to create an entire new list for each employee that you would onboard. How is this a good use of lists?

 

Microsoft

Hi @Kevin McKeown,

One thing that may help is that the audience for this list is the new hire, not the manager. It's a task list FOR the new hire to get set up, not a way for the managers to keep track of all their new hires.

 

The purpose is to create this new onboarding checklist per new person onboarding. The manager or buddy would create this list and share it with the new hire.
Iron Contributor

@Ben Truelove 

Thanks for the reply. That makes more sense from a use-case scenario. I could see department heads/managers possibly using this template for onboarding tasks within their department. I do wonder if it would just make more sense to use Planner Tasks though, instead of creating what are ultimately throw-away lists. As you describe it, this type of list template is meant for temporary usage and then it can be deleted. It is a throw-away list, which is a different mindset for how lists have typically been used in SharePoint. 

 

I also don't see HR departments using this employee onboarding template. I would imagine a classic list setup would probably be more suitable for an HR department that does need a broader management of several different new hires. The problem is that people (like HR people) who aren't familiar with Lists see this template and think it is a good solution for an HR onboarding process, when it really doesn't seem to be.

Microsoft

@Kevin McKeown the team would want to use it for all new hires, and not just a one-off. Each instance may be a one-off, but the team would want to continue to use the same template for each new hire. 

Iron Contributor

@Ben Truelove 

Yup, I get it, each instance of the list is a one-off/throw away. It just seems like a shift from how SharePoint Lists are typically implemented and I have a hard time seeing this actually being used. 

 

Throw away/one-off list instances does not seem like a good practice to me. I imagine your other list templates that are more traditional will get more usage than this type of one-off list template.

Microsoft

Thanks for all the feedback @Kevin McKeown. Lifecycle is something we consider, and in the new context of a list app, there will be some lists that have a shorter lifecycle than others. You can more easily delete them for example if necessary. Good points and keep them coming.

Copper Contributor

@MelissaBathum 

Hello,
I haven't found clear explanation regarding the ability to rotate the header text of a Sharepoint list. I found the command "rotate" and "rotate-point" to include in json style section but I haven't figure out to make it worked. Any help much appreciate !
Regards

Microsoft

@jgalles I haven't heard of a scenario for that. Do you have a screenshot you could share so we can understand what you are trying to accomplish?

Copper Contributor

@Ben Truelove 

 

Below is what I'm trying to do with a Sharepoint list formatting method. Is it feasible ?

 

Thank you

 

Capture d’écran 2021-04-12 à 19.30.01.png

Microsoft

@jgalles you're trying to angle the column headers? We currently don't support that as formatting is limited to the column cells and content below the headers. That would require an even greater level of customization than we currently support but an interesting use case!

 

I'll be sure to add it to things to explore for future features. I may just be guessing, but @Vesa Juvonen may know a way to do something in SPFX?

Copper Contributor

@Ben Truelove 

Ok thank you for your quick response.

So if it's not (yet..) possible, is there a way to fix/freeze the first column and first row (like in excel) ?

 

Thank you

Julien

Copper Contributor

@MelissaBathum Hello, i am using microsotf TODO prog. I am really appriciated. But, i have a problem. I have several lists. I want to give the tasks to a person who is not in the same list, but the one who is on the a nother list. In brief, there is a move the task button, but i want to copy the task to another list. Can it be done? Thank you so much.