Add welcome pop up for first time users of your site using AngularJs Material


Hi Guys,

We really do only have one chance for putting a first impression for end users on our website. User’s will never land back to your website if there is nothing interesting found on web site. Same logic works for SharePoint sites too. When a visitor lands on your site for the first time (and maybe the last), how you welcome them will have a big impact. This can be accomplished with pop-up boxes, fullscreen welcome mats, live chat invitations, and more.

This post is all about a welcome popup on SharePoint site. In brief, I try my best to provide very easy solution of showing welcome pop up.

Requirement: One of my recent project client asked to show a welcome message. Server side webarts are not promoted by out clients because our site was built in SP online. It sounds very easy but complication added by showing this pop up only once per user.

Solution: As a solution, i suggested to achieve this using Content editor web part. Just place some quick JS code on the landing page and with the help of a list we are able to detect if user is first time user or not. So here is the components of this solution:

  1. A list “Users” which stores list of first time users
  2. Content editor web part.
  3. Site Assets library to refer the local references like Angular, Jquery, css etc.

Let me go through step by step implementation of this solution.

Step I: Create a “Users” list

  1. Visit Site > Site contents.
  2. Click on New > Choose Custom List template> Name it as “FirstTimeUsers”.
  3. Once list is created. Navigate to newly created List settings > Add column
  4. Add column “User” of type “Person and Group”.
  5. Now with this list Title field is required. We can make this field hidden or optional if not required.

We are done with creating a list which stores information about first time users. We will be updating using rest api calls and each time when user logged on to site. His/her entries will be added to this list only.

Step II: Add references for angular, material, jquery etc.

This step can be skipped in case you need to refer all required libraries from CDN. But I never recommend this way, rather download the latest files to Site assets library. It also reduces extra burden on your site to download these library each time from CDN.

  1. Navigate to the Site assets library.
  2. Create a folder called “CustomFiles”.
  3. Create another folder “AngularJS”.
  4. Download files angular.min.js, angular-animate-min.js, angular-aria.min.js, angular-material.min.css, angular-material.min.js, angular-messages.min.js, jquery-3.3.1.min.js
  5. Upload these files to AngularJs folder.   

Step III: Create angularJS app files

  1. Create two files named as: dialog.tmpl.html and dialogApp.js
  2. Copy following code to dialog.tmpl.html file: dialog_tmpl_html
  3. Copy following code to dialogApp.js: dialogapp_js
  4. Now change the <Site URL> with the url of your site.

These two files are required for angularJS to initialize and configure to show dialog box. The html file can be used to modify contents of dialog box.

Step IV: Add content editor webpart on homepage.

  1. Navigate to the page where you need to show pop up
  2. Edit this page and click on add webpart under any zone
  3. Under “Media and content” find “Content Editor” web part. and add it.
  4. Now Edit this web part and under ribbon find “Format text” tab and “Edit Source” option under it.
  5. Now past following code here:

http://SiteURL/SiteAssets/customfiles/angularjs/angular.min.js

http://SiteURL/SiteAssets/customfiles/angularjs/angular-animate.min.js

http://SiteURL/SiteAssets/customfiles/angularjs/angular-aria.min.js

http://SiteURL/SiteAssets/customfiles/angularjs/angular-messages.min.js

http://SiteURL/SiteAssets/customfiles/angularjs/angular-material.min.js

http://SiteURL/SiteAssets/customfiles/dialogApp.js
http://SiteURL/SiteAssets/customfiles/angularjs/jquery-3.3.1.min.js
<link href=”<SiteURL>/SiteAssets/customfiles/angularjs/angular-material.min.css” rel=”stylesheet”/>

​​​​​​​

</div>

That is it. Just save your page and Publish it.

Step V: Test your pop up.

Now log on with separate users on the home page and check if there is entry created under “FirstTimeUsers” list.

Let me explain here a little about the ajax calls here. The code under dialogApp.js files first get the information of the logged on user. Get user information SharePoint using REST Api. Then using REST api, it tries to find out its entry under “FirstTimeUsers” list. Here is the rest call:

/_api/web/lists/getByTitle(‘FirstTimeUsers’)/items?$select=User/EMail&$expand=User&$filter=User/EMail eq ‘<email_of_user>’

In case, it found any entry popup is not shown to user. But if it has found any entry then pop up is shown and on close event of the pop up another rest query will insert entry to the FirstTimeUsers List.

That is all about it. Don’t forget to hit like and kindly rate this article.

Happy SharePointing !!!

 

Advertisements

Get user information SharePoint using REST Api


Hi,

While working on a requirement, I encountered a scenario where I need to show welcome pop up to the first time users. First time user, SharePoint does not provide any api or any solution which gives information about users who logged on first time on your web site. I have documented the whole solution on some other post(Add welcome pop up for first time users of your site using AngularJs Material) But this post I only want to scope it to retrieve information of logged on user. Information mean current user’s accountId, First name, Last name, Email and other required details.

I am only talking about client side code here i.e. using REST api or SP default APIs. Below are the various ways to get the property of current user who is logged on to SP site. There are many ways to achieve this requirement but I prefer to use SP.UserProfiles.PeopleManager Api to get it. It gives us vast option to retrieve any user information. Here are some details of getting various details:

  1. Get all properties of current user:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties

  2. Get single property of current user:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties/PictureUrl

    OR

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl

  3. Get Multiple Properties for the current user:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl,AccountName

  4. Get all properties of Specific User:
    For Office 365/SharePoint Online:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=’i:0%23.f|membership|mohit.vashishtha@siteurl.onmicrosoft.com’

    For SharePoint 2013 On-Premise:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=’domain\username’

  5. Get Specific UserProfile Property of Specific User:
    For Office 365/SharePoint Online:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName=’LastName&#8217;)?@v=’i:0%23.f|membership|mohit.vashishtha@siteurl.onmicrosoft.com’

    For SharePoint 2013 On-Premise:

    http://siteurl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=’domain\username’

NOTE: I had issues with getting the specific property for a user on #5. This worked fine though:

http://siteUrl/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=’domain\mohit.vashishtha’&$select=DisplayName,AccountName,PictureUrl

Here are some details about user properties:

List of User Properties (Use the GetPropertiesFor function for these):

  • AccountName
  • DirectReports
  • DisplayName
  • Email
  • ExtendedManagers
  • ExtendedReports
  • IsFollowed
  • LatestPost
  • Peers
  • PersonalUrl
  • PictureUrl
  • Title
  • UserProfileProperties
  • UserUrl

List of User Profile Properties (Use the GetUserProfilePropertyFor function for these):

  • AboutMe
  • SPS-LastKeywordAdded
  • AccountName
  • SPS-Locale
  • ADGuid
  • SPS-Location
  • Assistant
  • SPS-MasterAccountName
  • CellPhone
  • SPS-MemberOf
  • Department
  • SPS-MUILanguages
  • EduExternalSyncState
  • SPS-MySiteUpgrade
  • EduOAuthTokenProviders
  • SPS-O15FirstRunExperience
  • EduPersonalSiteState
  • SPS-ObjectExists
  • EduUserRole
  • SPS-OWAUrl
  • Fax
  • SPS-PastProjects
  • FirstName
  • SPS-Peers
  • HomePhone
  • SPS-PersonalSiteCapabilities
  • LastName
  • SPS-PersonalSiteInstantiationState
  • Manager
  • SPS-PhoneticDisplayName
  • Office
  • SPS-PhoneticFirstName
  • PersonalSpace
  • SPS-PhoneticLastName
  • PictureURL
  • SPS-PrivacyActivity
  • PreferredName
  • SPS-PrivacyPeople
  • PublicSiteRedirect
  • SPS-ProxyAddresses
  • QuickLinks
  • SPS-RegionalSettings-FollowWeb
  • SID
  • SPS-RegionalSettings-Initialized
  • SISUserId
  • SPS-ResourceAccountName
  • SPS-AdjustHijriDays
  • SPS-ResourceSID
  • SPS-AltCalendarType
  • SPS-Responsibility
  • SPS-Birthday
  • SPS-SavedAccountName
  • SPS-CalendarType
  • SPS-SavedSID
  • SPS-ClaimID
  • SPS-School
  • SPS-ClaimProviderID
  • SPS-ShowWeeks
  • SPS-ClaimProviderType
  • SPS-SipAddress
  • SPS-ContentLanguages
  • SPS-Skills
  • SPS-DataSource
  • SPS-SourceObjectDN
  • SPS-Department
  • SPS-StatusNotes
  • SPS-DisplayOrder
  • SPS-Time24
  • SPS-DistinguishedName
  • SPS-TimeZone
  • SPS-DontSuggestList
  • SPS-UserPrincipalName
  • SPS-Dotted-line
  • SPS-WorkDayEndHour
  • SPS-EmailOptin
  • SPS-WorkDayStartHour
  • SPS-FeedIdentifier
  • SPS-WorkDays
  • SPS-FirstDayOfWeek
  • Title
  • SPS-FirstWeekOfYear
  • UserName
  • SPS-HashTags
  • UserProfile_GUID
  • SPS-HireDate
  • WebSite
  • SPS-Interests
  • WorkEmail
  • SPS-JobTitle
  • WorkPhone
  • SPS-LastColleagueAdded

Happy SharePointing !!!