Tag Archives: github

Customizing SharePoint’s Modern Lists’ Forms

Ya know that awesome new interface we get in Office 365 called Modern Lists? Ya know how that’s not editable, or customizable, or extensible? Well, ya know it right! It’s not.

However…

modern_list

Purty Modern List

Above is a typical modern list, in all of it’s glory. Pretty right? But I want to add some of my own code to this and do some cool customizations. Currently, that’s only reserved for the classic list view:

classic_list

Yucky Classic List

I just threw up a little in my mouth. 

What if we took the classic view, and persuaded it to be modern, but keep the beauty of customizations? It’s just some good ‘ole CSS, and yes I’ll share.

Quick steps on what to do:

  1. Download this little CSS file (click here for project on github).
  2. Upload the CSS file to SharePoint somewhere, like your Site Assets library
  3. Create a quick HTML file with just a link to the CSS file, i.e. <link rel=”stylesheet” href=”/SiteAssets/classic_modern.min.css”></link>.
  4. Upload the HTML file to SharePoint
  5. In the library where you uploaded the files, right click on the HTML file, Get Link, then select Restricted Link, and copy that URL
  6. Navigate to your list.
  7. Ensure it’s in Classic mode, and will stay that way. Go to List Settings, then Advanced settings. Scroll all the way down to List Experience and select Classic experience.
  8. Navigate back to your list and create a new item.
  9. Use the cog in the top right, and select Edit page.
  10. Add a Content Editor Web Part and set the Content Link to the URL of your HTML file.
  11. Save it all and reload the page, BLAMO
  12. I have a more indepth walk through on how to do this using a JavaScript file here, same applies to a CSS file.

classic_modern_list

YAY!

The flow and feel of the classic form is a lot more like the modern form, but ’tis classic.

Some Notes

  • Terrifyingly enough, the CSS for the modern lists are on the pages themselves, not in a CSS file I can reference. So there was a lot of copy/pasting of CSS from a modern list to this CSS file.
  • Your classic list form will have the full ribbon, this CSS is primarily focused on the form interface for users.
  • This will not do anything on the list view pages, I haven’t bothered styling those yet.
  • If you wanted to, you could put this CSS into a global CSS file so all classic lists will have similar interfaces.
  • This CSS is not all inclusive, it should get you most of the way there. If you do add to it, please feel free to share on the github project, or send me the changes.

Thanks, and ’til next time Happy SharePointing!

Advertisements

SharePoint Script: Hide or Disable your fields

This one has been on my list for a while. I’ve used a collection of JavaScript methods to help streamline customizing forms in lists. I have created and compiled this little collection starting probably 5-6 years ago, and over time I’m constantly updating, tweaking, enhancing it, especially more so as of late working with Office 365.

This script works on SharePoint 2013, 2016 and Online. I heard it works on 2010 as well, though I haven’t had much experience with it there. Let me know!

I have a lightweight JavaScript file which allows you to hide or disable (set to read-only) fields in a new or edit form. It’s pretty basic but is a big value add. Also, you can set a field to read-only for only certain groups, meanwhile allowing other groups to edit the field. You can also hide a field completely, as well as hide a field and only show it for certain groups. Pretty sweet right?

UPDATED 2/28/15 fix a few bugs as noted in the comments.

UPDATED 10/22/15 fix disableWithAllowance and people pickers.

UPDATED 10/23/15 fix disable and disableWithAllowance and metadata fields.

UPDATED 5/24/16 fix issue with disabling Lookup Fields, now will show correct value.

UPDATED 8/1/2016 fix issue with disabling choice fields as radio buttons, now will show the single selected value.

UPDATE 9/27/2017 not really a fix, but moving from CodePlex to GitHub

The script is here: download from GitHub.

How to use it

Include the script along with jQuery on your page. Ideally, throw this nugget into your master page and you can use it anywhere in your site.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/SiteAssets/Lozzi.Fields.js" type="text/javascript"></script>

Once that’s in, get using it! It’s really simple, I threw this on my new form for my task list:

<script type="text/javascript">
 $(document).ready(function(){
  ExecuteOrDelayUntilScriptLoaded(function(){
 Lozzi.Fields.disableWithAllowance("Start Date", ["Project Managers"]);
 Lozzi.Fields.disable("Task Status");
 Lozzi.Fields.hide("% Complete");
 },"sp.js");
 });
</script>

This will change our New form for a typical task, from:

New SharePoint Task Form

to

New Task Form with Hidden Disabled Fields

See the difference? It’s subtle, but when working with end users, it can provide a huge benefit to help streamlining your business flow.

From here, you could have the edit form disable or hide a lot of the fields for normal users, only allowing your Project Managers, or if this is a support request list, your Support Team access to modify fields as needed. The options are endless.

More details

Lozzi.Fields.disable(fieldname)

Simply disables the field, for all users. It hides all controls in the field and displays the value instead.

Lozzi.Fields.disableWithAllowance(fieldname, groups)

Disables the field, but enables it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like [“Group One”, “Group Two”].

Lozzi.Fields.hide(fieldname)

Simply hides the field, for all users.

Lozzi.Fields.hideWithAllowance(fieldname, groups)

Hides the field, but shows it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like [“Group One”, “Group Two”].

Some other important notes

  • Currently, this script does not work on list views, meaning a user could edit the data in datasheet/quick edit view.
  • This script should work just as well on SharePoint 2010 if you so desire.

Download this script here: download from GitHub.

Til next time, Happy SharePointing!