Category: SharePoint

Office 365 Developer Bootcamp (Microsoft) – Melbourne

The Global Office 365 Developer Bootcamp is a free, one-day training event led by Microsoft MVPs with support from Microsoft and local community leaders. The bootcamps will provide hands-on labs for deep learning, and a comprehensive view of all key technologies and products on the Office 365 platform. Developers can apply these learnings to their products or solutions to achieve more right away.

Melbourne is hosting the Global Office 365 developer bootcamp with track dedicated to developers. You are free to attend topics all around Office 365 extensibility.

Technologies covered: Microsoft Graph, SharePoint Framework, Microsoft Teams, Office Add-ins, Connectors and Actionable Messages, and more.

To be successful in this workshop, you should have a general understanding of Office 365, SharePoint, Microsoft Teams and an ability to code in C# or JavaScript.

Lab Details can be found here:
http://ranku.site/melbbootcamp2018/
Event details: http://aka.ms/O365DevBootcamp

Slides are made available here:

Sydney (Office 365 Meetup) – Microsoft Teams – What’s Next?| Extend and Build App

Microsoft Team is the hub for teamwork in Office 365 that brings together conversations, files and tools. Teams give people a single place to communicate and collaborate and also allows the team members to customise Team with apps, bots (T-Bot, Who-Bot), tabs, Planner, Forms, Flow etc. as per their needs. There is an enormous number of out-of-the-box extensibilities exist within Team. But what if you need more features that are not in the MS Team but is essential for your company, team, or project? – this is what we will discuss during the session.
The session will include some updates on the newest additions to the development and extension for the MS Team. We will also demonstrate how you can leverage the existing resources from Microsoft and build the app you need for your business.

Thanks to Ken Josling for the snap

Meetup Event:
https://www.meetup.com/Sydney-Office-365-Meetup/events/254672548/
The slides are made available here:

Melbourne – Office 365 Saturday Australia

SharePoint Framework: Best Use of the New Capabilities and Free Resources

he SharePoint Framework is the current model for building rich client-side Web Part and SharePoint customizations. Since GA, there has been many samples and solutions developed by the community that are very helpful and free to use. If you need a new Custom Web Part for your business, why not reuse some of these great resources?

In the session, we will demonstrate how we can reuse some of the existing resources with little effort, how we can change those & deploy and in general, how we can speed-up our SPFx learning & development. We will also step through some of the new capabilities that have been announced recently. Demo includes:

  • Deploying Intranet in 15 mins – containing 20+ custom WebParts and Extensions (Personalised Quick Link, Emails, Share price, Weather, WorldTime, People Directory etc)
  • Dynamic Form WebPart – Creating Form from any custom list in a few minutes.
  • Search Refiners in Modern Page
  • Modern Calendar with an external data source

Event Link:
https://www.meetup.com/O365-Saturday/events/250533334/

Melbourne (MS365 Meetup) – Microsoft Teams | SharePoint – The Final Frontier

While Office 365 adoption continues to grow, some organisations are struggling to understand how to move past the traditional SharePoint and intranet-centric view of the world, and truly leverage all of the latest and greatest technology Microsoft has to offer. Microsoft Teams is a new way to focus on collaboration and communication, giving project teams and individuals the flexible features they need to get work done. This is the hub for teamwork in Office 365 that brings together conversations, files and tools. MS Teams gives people a single place to communicate and collaborate and also allows the team members to customize Team with apps, bots, tabs etc. as per their needs.

Meetup Event:
https://www.meetup.com/Melbourne-Office-365-Meetup/events/249012734/

Slides are available below

Office 365 Developer Bootcamp (Microsoft) – Melbourne

Introduction and hands-on LAB on SharePoint Framework Extensions

Agenda

  • Toolbox
  • SPFx generators – new options
  • Structure overview
  • SharePoint Framework Extensions
  • Deployment
  • Demo
  • Hands-on Lab – Building and Deploying SPFx Extensions
Thanks to Ashish for the photo

Follow up Blog: Global Navigation and Branding for Modern Site using SharePoint Framework Extensions
Upcoming O365 Dev Bootcamp: http://aka.ms/O365DevBootcamp
Slides can be found here

SharePoint Framework – Introduction to SPFx Extensions

@types SharePoint error – index.d.ts TS1005

The latest version of the @types/sharepoint is throwing the the following error:
Error – typescript – node_modules\@types\sharepoint\index.d.ts(3604,17): error TS1005: ‘,’ expected.
Error – typescript – node_modules\@types\sharepoint\index.d.ts(70,42): error TS2314: Generic type ‘ListItem<T, any>’ requires 2 type
argument(s).

After spending sometime trying to fix the issue, I found the current version of the @types/sharepoint is expecting the new TypeScript Compiler. Issue reported

Fix:
If you already have installed the latest version, uninstall the version from the solution:
npm uninstall @types/sharepoint

Use the last working version (2013.1.6):
npm install @types/sharepoint@2013.1.6 --save-dev

Note: These are the versions that are available during the time of this post.

Embed Yammer Feed – what if it’s blocked?

Embedding yammer feed into a site is super easy and well documented.

There are many scenarios where the yammer feed might throw error. For example:

  • If the user does not have any yammer account yet
  • If yammer is blocked in a particular network etc.

The following JavaScript snippet will gracefully hide the yammer feed error and will show a user-friendly message.

https://gist.github.com/AnupamRanku/e135a5f1e46670bd2c3c29805d90e5f9.js

Listening to the error event can be another alternative option but keep in mind, if yammer is blocked, the callback method will never be invoked.

Update Managed Metadata fields using Nintex Workflow Custom Action

Background

In one of my recent projects, we were building a Reusable Nintex Workflow and one of the steps was to update managed metadata field. To our surprise we found that even Nintex 2013 Workflow does not have any action to update the managed metadata. There are workaround by using webservice and Term Guid  but that was not an ideal solution for us.

Some of our requirements

  • We want to update one or many managed metadata fields in the workflow. The value of the field will be determined by the outcomes of other workflow steps.
  • We cannot hardcode Term GUID in the workflow. We have automated ways to deploy our workflow (through scripts) and it goes through few environments (Dev, System Integration, UAT, Prod-Support) before it goes to production. In each environment the Term GUID will be different.
  • Easy to use. Same methodology will be used in different workflows in different projects. So it must be easy to use, intuitive option.
  • Storing user credential was not an option.

Solution: Nintex Workflow Custom Action

What can be more easier way than to drag an action into the workflow designer and configure the field name and Managed Metadata value?  So I develop a Nintex Workflow Custom Action, “Taxonomy Update”. Below I am providing the ready to use solution and instruction to use the action. Hope others might find it useful.

Deploying Nintex Workflow Custom Action (3 Steps)

  • Download the Cassini.Workflows.wsp
    This is free to use for personal or business projects. The solution has been deployed and tested in enterprise level. I have not posted the source code yet (something I might do in future).
  • Deploy the wsp in SharePoint farm.
    You can use the following Powershell commands to deploy the wsp.
    Add-SPSolution Cassini.Workflows.wsp
    Install-SPSolution –Identity Cassini.Workflows.wsp  -GACDeployment
  • Activate the WebApplication feature (Cassini.NW.CustomActions)
    Go to Central Admin >  Application Management> Manage web applications> Select the Web application you want to use the Custom Action> Click Manage feature form the Ribbon > Activate Cassini.NW.CustomActions feature.

Using/Configuring Taxonomy Update Action

  • Create a new Nintex workflow or open an existing Nintex workflow.
  • Add “Taxonomy Update”
    In the left ToolBox, you will see a new option “Cassini Custom Actions”. If you click that you will find the newly installed action “Taxonomy Update”. Drag the action into the canvas.
  • Configure
    Double click on the newly added action to configure. In the Taxonomy Field Name enter the name of the field/column in that document library/list that you want to update. In the Field Value enter the full path of the term separated by pipe (|).

    So if you are updating a managed metadata field called “Document Status”, the value of Taxonomy Field Name will be Document Status.If you are setting the value to a term named “Approved” that resides in Taxonomy Term Store “Managed Metadata Service”, Term Group “Cassini” and Term Set “Document Status”, then the full path will be: “Managed Metadata Service|Cassini|Document Status|Approved”.You can also select sub term e.g. “Managed Metadata Service|Cassini|Document Status|Finalised|Archived”.

    The solution package can be found here Cassini.Workflows.zip
    Hope this helps!

FCKEditor in SharePoint (IE & Non-IE)

In SharePoint, we face one common problem while editing a Rich Text field from Non-IE browsers; the field does not have any Rich text editor. There are few blogs and forum posts showing how we can add FCKEditor in Non-IE browser. But after deployment we will no longer have consistent UI in IE and Non-IE browser for that screen. And after deployment, many users also find th FCKEditor more useful and easy than the default SharePoint Rich Text editor.

So in our project, we decided to use FCKEditor in both IE and Non-IE browser. To do this, I spent some time and came up with the following solution. However after deploying the solution we have tested well and we have not found any side effect, which is very nice 🙂

Steps:

You can download the FCKEditor controls from here. In our case we have unzipped the control in the following location:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATECONTROLTEMPLATES

We have to modify four JavaScript file:

1. FCKCONFIG.JS

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATECONTROLTEMPLATES\fckeditor

Add the following configurations in the “fckconfig.js” file to add two new toolbar sets:

https://gist.github.com/AnupamRanku/3ab7e9b15ca62ec1bef16fc839b08c0a.js

Why two?

Multi lines of text has two Rich Text type. One is Rich text (Bold, italics, text alignment) and another is Enhanced rich text (Rich text with pictures, tables, and hyperlinks). In above toolbar set I have listed the appropriate ones, those are supported by the field type. However, you can remove controls, if you want.

2. CORE.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\1033

Add the following JavaScript at the end of the “CORE.JS” file. While webpage loading, this JavaScript will replace all textarea with FCKEditor dynamically. This will enable FCKEditor control in both IE & Non-IE browser.

https://gist.github.com/AnupamRanku/7082527294ff16c812b9822b0b359395.js

3. BFORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\1033

Search with RTE_ConvertTextAreaToRichEdit in the file “BFORM.JS”. You will find two results. One of those is a function. Modify the function and put return; as the first statement of the function. This will prevent the function from being executed. The function will look like the following:

https://gist.github.com/AnupamRanku/a2af1b762eef6137beefdc54cdbbd291.js

4. FORM.JS
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\1033

Follow the same steps as we did for file “FORM.JS”. Search with RTE_ConvertTextAreaToRichEdit in the file “FORM.JS”. You will find one result, a function. Modify the function and put return; as the first statement of the function.

NON_IE.JS (Caution!)
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATELAYOUTS\1033

We should not modify this file any more. To enable FCKEditor in only Non-IE, we need to modify this file. But now we are enabling FCKEditor for both IE and Non-IE. And for that we have modified CORE.JS, which is invoked for all browsers. So we no longer need to modify NON_IE.JS. Well, if you mistakenly modify this file then if you open the page with Non-IE browser, you will find two FCKEditor for each field 🙂

However, I have used JavaScript function SLAC_NonIERichText from this forum.