Tag: JQuery

Change the display value of list column

by Mikko Koskinen, posted in PowerShell, SharePoint

Every now and then my customers are asking me to hide some list column from different views. Because every time I have to think that what is the best way to fulfill this requirement I decided to write this post that basically tells the different options. There are ways x to hide the column in different list views. And by views here I mean DisplayForm, EditForm and NewForm.

  • With list level setting
  • With JavaScript or actually JQuery here

As you can see I left out the options for doing this with server side code or declaratively during the wsp installation for example. These solution can be used to make the change in existing environment and especially these are working in Office 365. Actually the examples have been developed in my Office 365 test tenant. For these examples I created an OOTB announcement list and added one new column called “Hide Me”.

Change the list level setting

This shouldn’t be a new thing to you but just for reference. You can change the list column visibility from list settings. But this setting will change the visibility in all forms. There is no form level setting available through UI.

  1. Go to list setting from the ribbon
  2. Activate the content type management if necessary
  3. Open the content type that holds the field
  4. Click the field you would like to hide
  5. Select Hidden from column settings

Here’s a video that shows you the steps if needed.

Hide the column with JavaScript

This method is for maybe more advantage users because you need to insert some script to the pages. With this method you can hide the column form any list form separately.

  1. You can find the list form edition option from the ribbon. Open one you want to edit. I use display form here because that’s the most common form one have to edit.

  2. This will open the form (or actually a page). The form is opened in edit mode.
  3. Add a Script Editor web part to main zone.

  4. Click the Edit Snipped link and add the code below to editor.
  5. Remember to change the “Hide Me” text to match your field title.
  6. Click Stop Editing to save the changes.
  7. Your field should now been hidden in display view.

I decided to use JQuery in my script because this way it’s more flexible to search the right HTML element from the page. The code below includes a link to JQuery but you can leave it away if that is already loaded on your environment.

In the page the list columns are actually shown in table format. What we will do here is that we will find the title of our field that we want to hide. Then we will get the closest row and hide it. This will hide both the title and value columns. To get field back simply delete the script editor web part from the form. There is one small draw back when you use this method. For a blink of an eye it’s possible that users are actually seeing the field when they load the form. This is because the scripts in editor web part are run only after the form has been fully loaded.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script type="text/javascript" language="javascript">
$(document).ready(function() { $('h3:contains("Hide Me")').closest('tr').hide(); });
</script>

Using PowerShell

Because of the delay there I decided to seek still one option. If you know there is actually SetShowIn setting for field. This setting is available only through object model or you can set it declaratively in field xml settings. Because we already had the environment running and we are using Office 365 those options wasn’t available to us. For me PowerShell is the tool make this kind of coding necessary operations.

You can actually use SharePoint client side code with power shell also. I won’t go through the requirements and basics of that because a link original source for how to do it is a lot easier. Thanks for Chirs O’Brien for posting this tip http://www.sharepointnutsandbolts.com/2013/12/Using-CSOM-in-PowerShell-scripts-with-Office365.html

  1. Make sure you have the SharePoint client dll available on the machine you are running the PowerShell script.
    1. If you don’t have SharePoint server available from where you can get them, you have to download and install SharePoint Server 2013 Client Components SDK.
    2. http://www.microsoft.com/en-us/download/details.aspx?id=35585
    3. The path in my script is showing the place where you can find these dll:s in SharePoint server or after you have installed the SDK
  2. Change the path of the dll files to the script if needed.

  3. You can run this code from basic Windows PowerShell command prompt. You should run the command prompt as administrator.
  4. Navigate in the folder where the script is and run it with the following parameter.
  5. .\ChangeColumnFormVisibility.ps1 -Url “https://tenant.sharepoint.com/sites/spdevsamples/&#8221; -ListName “Events” -FieldName “Hide Me” -ListView “DisplayForm” -ShowInForm:$False
    1. Url = Url of the site where the list is
    2. ListName = Title of your list
    3. FieldName = Title or internal name of your field
    4. ListView = form which view you want to edit. This value has to be DisplayForm or NewForm or EditForm
    5. ShowInForm = Boolean ($true or $false) value that tells should the field be hidden or shown
  6. The script will prompt and ask you for credential during the run.
  7. The details of the changes are shown after the changes are done.

After the script is run you can go and see the changes in your list view.

 

 

 

 

 

 

 

The code is actually quite simple. First we connect to the site. After that we have to get the right list and it’s fields. We have to load the field collection before we can make the necessary changes. After that we can get the right field based the given name. Then we have to check what form value user wants to change and make the right changes and update the field settings.

# connect/authenticate to SharePoint Online and get ClientContext object..
$credential = Get-Credential
$clientContext = New-Object Microsoft.SharePoint.Client.ClientContext($Url)
$credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($credential.UserName, $credential.Password)
$clientContext.Credentials = $credentials

if (!$clientContext.ServerObjectIsNull.Value)
{
#This gets Microsoft.SharePoint.Client.List
$oList = $clientContext.Web.Lists.GetByTitle($ListName);
#This gets Microsoft.SharePoint.Client.FieldCollection
$fieldColl = $oList.Fields;

$clientContext.Load($fieldColl);
$clientContext.ExecuteQuery();

$field = $fieldColl.GetByInternalNameOrTitle($FieldName);

$clientContext.Load($field);
$clientContext.ExecuteQuery();

switch ($listView) {
"DisplayForm"
{
$field.SetShowInDisplayForm($ShowInForm);
$clientContext.ExecuteQuery();

$message = "Fields '" + $field.Title + "' DisplayForm visibility changed to: " + $ShowInForm
write-Host $message -ForegroundColor Green
break
}
"NewForm"
{
$field.SetShowInNewForm($ShowInForm);
$clientContext.ExecuteQuery();

$message = "Fields '" + $field.Title + "' NewForm visibility changed to: " + $ShowInForm
write-Host $message -ForegroundColor Green
break
}
"EditForm"
{
$field.SetShowInEditForm($ShowInForm);
$clientContext.ExecuteQuery();

$message = "Fields '" + $field.Title + "' EditForm visibility changed to: " + $ShowInForm
write-Host $message -ForegroundColor Green
break
}
}
}

You can find the whole script from my GitHub:

GitHub Mikko Koskinen

Advertisement