when I run my SPFx webpart solution in the local- or hosted- Workbench, everything seems OK. The data received from lists is displayed correctly, e.g. Freddy, Prayer request, Prayer for money, Food parcel, Appeared hungry. When I package and install the solution, a colon : is added to each retrieved text.

Hosted Workbench using the same list as source: Hosted Workbench using the same list as source

Packaged solution using the same list as source: Packaged solution using the same list as source

The strange field names are

  • Title: Prayer request / Food parcel
  • V3Comments: Prayer for money / Appeared hungry
  • Nickname: Freddy

    My function to retrieve the items looks as follows:

    private _getItems(requester: SPHttpClient): Promise<IInteractionLogItem[]> {
            const queryString: string = `?$select=Id,Title,Confidential1,Nickname,CallTime,` + 
      `Created,Modified,ReferredBy,Interaction_x0020_from_x0020_cli,Client_x0020_Satisfaction,Staff_x0020_Satisfaction,V3Comments,Interaction_x0020_Method,` +
      `Author/Id,Author/Title,Author/EMail,Client/Id,Client/Title,Client/EMail&` +
    const queryUrl: string = this._listItemsUrl + queryString;
    return requester.get(queryUrl, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      .then((json: { value: IInteractionLogItem[] }) => {
        return json.value.map((interactionLog: IInteractionLogItem) => {
          const returnItem: IInteractionLogItem = 
            Id: interactionLog.Id, 
            Title: interactionLog.Title, 
            CallTime: interactionLog.CallTime,
            ClientSatisfaction: interactionLog['Client_x0020_Satisfaction'],            
            Confidential: interactionLog['Confidential1'],
            Created: interactionLog.Created,
            InteractionMethod: interactionLog['Interaction_x0020_Method'],
            Modified: interactionLog.Modified,
            Nickname: interactionLog.Nickname,
            StaffSatisfaction: interactionLog['Staff_x0020_Satisfaction'],
            V3Comments: interactionLog.V3Comments,
            ReferredBy: interactionLog.ReferredBy,
            InteractionFromClient: interactionLog['Interaction_x0020_from_x0020_cli'],
            Client: interactionLog.Client,
            CreatedBy: interactionLog['Author'],
            AssignedTo: interactionLog.AssignedTo,
            ResolvedBy: interactionLog.ResolvedBy,
            Referrer: interactionLog.Referrer
          returnItem.CreatedBy.Picture = this._getPictureUrl(returnItem.CreatedBy.EMail);
          returnItem.Client.Picture = this._getPictureUrl(returnItem.Client.EMail);
          return returnItem;

I am confused where to start, as debugging in the working Workbench seems pointless to me. I got no idea how to debug the installed package. I followed the official React-Todo-Basic and React-Todo samples.

Any help is valued and appreciated, Dennis


I had a similar issue. I found that any text within a <label> element will have a : (colon) at the end.

There is a CSS definition on the page, which does this

label::after {
content: ":"; }

I used <div> with some custom CSS instead of <label> tags. Or you can override the CSS definition to not show : (colon).

Note, that <label> doesn't show colons in workbench.

Hope this helps.

  • Thank you, that is exactly it, it was only showing with Labels. I added label::after { content: ""; } to my CSS and the colon disappeared on the packaged webpart. – Dennis Kuhn Jul 5 '17 at 21:46
  • I created an issue/question at GitHub /SharePoint/sp-dev-fx-webparts/issues/254 about the inconsistent behaviour. I hope that;s the right place :-) – Dennis Kuhn Jul 5 '17 at 22:44
  • Using label::after { content ""; } was a bit rough :-) It caused the Tick of the Checkbox to disappear. I use it now on a per Label css class basis, e.g. for the timestamp class .timestamp::after { content: ""; } . I add this before the the .timestamp{ .... rules definition. – Dennis Kuhn Jul 6 '17 at 17:47
  • 1
    Yes Dennis. Thats the reason I though its better to replace the necessary <label> tags with <div>. So that, it gives us more control without effecting any other elements on the page. – Ram Jul 7 '17 at 2:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.