Mark Anderson published today an article on his blog concerning an issue that currently exists in Office 365 and is called “Office 365 Update Changes ‘Display Name’ on Required Fields”. In this article he described that the rendering of fields recently have been changed in Office 365. I will take a look what can be done to solve this probably.

The cause of the problem

The title attribute of list fields have been widely use to customise forms in SharePoint using JavaScript, JQuery or SPServices. I used this attribute sometimes too do address fields by the display name. But somehow I always had a bad feeling about this. Why? Well, the ID attribute of the field is the only real unique identifier in the form. The downside using the ID is that you need to have some information about the field to generate the ID. But I will explain this later.
What the update recently in Office 365 did was to change the rendering of the field. Previously it look like this:

Now it has changed to this:

As you see now the title has additional parts such as required or field. This means that you haven’t in this attribute the display name of the field alone and you will fail if you query by title.

Safer approach to request fields

As mentioned before the ID property is the only one that is unique in the whole page. The ID is formatted in the following form:
Field name + ”_” + Guid of the field + ”_$” + Type of the field.
As seen in the previous section the ID looks like this:
Region_59566f6f-1c3b-4efb-9b7b-6dbc35fe3b0a_$LookupField
So if you like to be absolutely sure and like to generate this ID by yourself you need to do a request to the list and read the fields. The you will be able to find the name by the display name, the id and the type. This will make some lines of code that you can reuse in your projects. I haven’t seen any ready made code yet but I’m sure it can be found somewhere over the internet. (If you have would be great to post that in the comments)
I looked into this problem and what I found was that SharePoint does that job for you and stores it on the form in the JavaScript variable “WPQ2FormCtx”.

Console output of WPQ2FormCtx Object

Console output of WPQ2FormCtx Object

This context is somehow new in SharePoint 2013 and Office 365 This somehow represents the so called form context with a lot of information. Also included in this variable is the list schema which we can use without loading any additional information from the list.
So what I did is that I created a small javascript object that loads the information and allow me to generate the id of the field. The tricky part i currently not have implemented is the type part because this is a little bit tricky and the value changes with the different configurations of the fields. I hope that the following code give you an example how this works.

To this script the last part needs to be added to be 100% sure. Think about the fill in option for example this will start with the same id but I’m sure there will be added a special type.

Field after update via JS

Field after update via JS

As you see the value was written to the form

A Look to the future

I will never use the title field again. I write this now 100 times to keep it in mind. But not here in this blog post. In future I will reuse my little helper object for a simple reason. If Microsoft changes the format of the ID attribute I only need to change it at a central location instead of search and replace all my jQuery / JavaScript code.
Convenience is not everything better go an extra mile to be safe.

The great thing about SharePoint is that you can accomplish a goal in many ways. In my case the first version was SharePoint 2003 and I’m used to add attachments always from the edit form.
Recently, while I was working on a solution that works with attachments of list items, I accidentally discovered a faster way to add attachments to a list item. This option is hidden in the ribbon and allows to add attachments directly from the list view.

1. Select item 2. Attach file

1. Select item
2. Attach file

First select any item from the list and then the ribbon button. After you clicked the button the upload dialog opens and an attachment can be added to that specific item.

upload attachment

upload attachment

This saves time especially if files need to be added to multiple files. Sadly the upload dialog doesn’t support multiple file upload via drag and drop. This works in SharePoint 2010 as well as in SharePoint 2013

The lesson I learned. Review your personal and trained workflows, how you do something. There is might a better way to do something.

 

 

One big prejudice is that SharePoint is not capable to produce clean HTML output via the rich text editor. This was somewhat true with the previous versions of SharePoint. In SharePoint 2013 this has improved and can output all basic text elements without any additional style sheet classes.

How is this possible? By using the magic “-ms-element” attribute.

Element behaviour in the past

To explain how this works in the current version we need to take a look back to the rich text editor definitions of SharePoint 2010. To show I picked out the style definition for the “Header 1” element. This will be rendered as <h1 class=“ms-rteElement-H1”> .

The definition in the “corev4.css” goes like this:

The first definition is not a visible style. It is more an indication for the rich text editor that there exists a style definition for an H1 element. The label for the drop down is defined by the “-ms-name” attribute, a Microsoft specific vendor prefix. The H1 prior the classname defines the element that should be rendered.

The second style definition contains then the style that should be applied to the H1 element.

SharePoint 2010 - Rich text editor format and source code

SharePoint 2010 – Rich text editor format and source code

This worked perfect, but every single paragraph, list and headline had those classes assigned. Due this classes the file size increases.

Something to worry about? Let’s take a look how the browser handle those styles and tags.

Rendering in the browser

The most important style sheet files is the “corev4.css” in SharePoint 2010 and the “core15.css” in SharePoint 2013. Both files are huge and have a lot of design information. How will those files rendered by the browser internally?

The browsers follow a clear logic how they render all the elements and style definitions.

  1. Parse all tag styles (eg. H1, H2, P,…)
  2. Parse all class style definitions (eg. .ms-rteElement-H1)
  3. Parse all ID style definitions

“This hierarchy is the reason why sometimes ‘!important’ needs to be used because a style definition of a class gets overruled by an ID definition.”

This parsing goes all through the DOM and requires some time. Once the style is known by the browser the rendering commands will be sent to the render engine and the content gets displayed. To optimise the overall output performance, we just want to have clear HTML element with easy to identify the styles of those.

This is not so important for desktop browsers, but think about mobile devices and the bandwidth you have there. The structure of the HTML and the CSS have direct impact on the user experience, especially on older devices.

Optimise the HTML output using -ms-element

In the style sheets of SharePoint 2013 in some places a mystical new vendor prefixed attribute have been introduced. Mystical because there is a big lack of official information on this.

I research this behaviour. From my experience this attribute is responsible to render only the HTML tags instead of output it the old fashioned way like it was in SharePoint 2010. To explain how this works, let’s use the definition of the “Header 1” once again. First, we take a look at the code that can be found on various places in the “core15.css”.

The first part of the style shows the general definitions of all H1 tags wherever this will be used in the source code (Style 1).

The second definition (Style 2) defines as before that the editor should list “Heading 1” style in the rich text editor drop down and then there is the “-ms-element” attribute. So this means when a user browses the content only the H1 tag is included in source code. All without any additional class on the header.

The most important part is the third because it shows two different definitions. The “.ms-rtestate-field H1” definition is used for the view mode only. “.ms-rtestate-field” is the style sheet class that encapsulates the rich text editor content while H1 identifies the child tag.

The definition for “h1.ms-rteElement-h1” is the same definition as we had in SharePoint 2010 but now it will be only used for the edit mode. You will see this if you take a look at the source code during editing.

SharePoint 2013 - Rich Text Editor format and Source Code

SharePoint 2013 – Rich Text Editor format and Source Code

Now the content will be rendered differently in display and edit mode. Therefor both definitions are required to display the content correctly.

Summary

As you see now the rich text editor is able to output clean HTML code for all typographic standard elements. Every modern web content management use this. So does SharePoint. The benefit of this is that content migration from other systems is now easier because all that is needed is only plain HTML. Another benefit of this is that it has a positive effect on the SEO ranking of a public facing web site.

Customisation can be done if easily now because all that needs to be define are styles for the standard text element.

Happy New Year to all the readers of my blog and I wish you all the best. The year 2013 is gone and there were a lot of things I’ve done. I love to take the new challenges for the year 2014 and this will be an amazing year for sure. I also have to thank the community for the great feedback I received.

The right time to take a last look back to the gone year and look forward to a fantastic year 2014.

SharePoint-Community.net

I was honored when Mark Jones asked me to join sharepoint-community.net to be part of the community representatives. To join this group of people was on of the best decisions I ever made. It’s fun and challenging to build up such community.

Soon after joining we started to make the first idea to organize an online conference. This is now better known as http://www.sp24conf.com. To me it was also a great opportunity to show my skills and develop the responsive web design based on Microsoft SharePoint Foundation from scratch.

SP24 Conference

The 24 – Hours SharePoint Conference

SharePoint Forums

I started to help other people back in the year 2011. I love to answer questions there, because they are very useful in several ways. Read quality reply by other and learn about other people challenges. The last thing helped me a lot to do my job better. I was awarded in the year 2011 / 2012 with the SharePoint Community award. In 2013 I wasn’t awarded because I had too many side projects. This year I passed the score of 10.000 points, which indeed was unreachable when I started.

Blogging

I still love to blog. Not only on this blog. I also joined brandmysharepoint.de. This is a German blog about SharePoint Branding.

One highlight of my blog was that I reached 100.000 page views.

I feel honored to save Mark Anderson time and he published one of my blog post Retrieve Managed Metadata using JavaScript and SPServices in his SPServices Stories.

Speaking

Hopefully I get more opportunities to speak about cutting edge web technologies and how they can be applied to SharePoint. Currently I have one event in my plan, where I will have a session but I truly hope that this won’t be the only one.

I only had one opportunity to speak that I really enjoyed. It was at the ShareCamp in Vienna the session there was about “Responsive vs Adaptive web design and Device Channels”.

The presentation I published on slide share had currently more than 2000 views and was massively shared. Thanks to all who enjoyed and shared it.

Traveling

I really enjoy traveling all over the world and have already some destinations on my road map for this year.

Hope to meet many of you at these conferences.

Happy new year and wish you all the best !!!

Have a good start in the year 2014.