SharePoint 2013 Javascript _spPageContextInfo

When coding in SharePoint using JavaScript, then _spPageContextInfo code comes really in handy. _spPageContextInfo is a code that contains information about the current context or details about the SharePoint site. Some of the main data able to retrieve from _spPageContextInfo:

  • Current Culture
  • Current Language
  • Layouts URL
  • SharePoint web page URL
  • SharePoint site or subsite URL
  • UserId of the person logged into SharePoint
  • SharePoint site title

Here is a image list of all properties within _spPageContextInfo:

1._spPageContextInfoProperties

2._spPageContextInfoProperties

2._spPageContextInfo Properties

 

SharePoint Angular and bootstrap Form – Part 2

Continuing on with one of my previous blogs, SharePoint Angular and bootstrap Form – Part 1, in this blog, we are going to focus on how to extract data with SharePoint Angular Rest Service and put that into Angular scope.

The steps involved in this process are:

1. Remember to add the Script reference in SharePoint mentioned with the previous blog.

4.ScriptAndLinkReference

2. Then add the following code below within the the angular controller:

1.AjaxGetUserDetails

The code is explained as below:

a)

var userid = _spPageContextInfo.userId;

The _spPageContextInfo.userId code get’s the userId of the the person logged in to SharePoint.

b)

var requestUriGetUserDetails = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

The _spPageContextInfo.webAbsoluteUrl get’s the URL at the site level of the current site:

So if the sharepoint in your URL is:

https://sharepointsite.com/projects/sciprojmgnt/Pages/MyFirstAngularForm.aspx,

then then the value of, _spPageContextInfo.webAbsoluteUrl , would be:

https://sharepointsite.com/projects/sciprojmgnt/

The second part of the code is:

“/_api/web/getuserbyid(” + userid + “)”;

This code calls the api getuserbyid, with the parameter of userId.

getuserbyid api contains good amount of details of the current user, such as:

user’s login name, full name (title), email address, etc.

3.getuserbyid api.png

c) the Jquery Ajax function code is executed, with a success function called:

onSuccessGetUserDetails

and function method:

onErrorGetUserDetails

The onSuccessGetUserDetails function get’s the value from  getuserbyid api, and then stores then to the angular scope variables:

 var varFullName = data.d.Title;
 var varEmail = data.d.Email;
 var varLoginName = data.d.LoginName;

 $scope.loginName = varLoginName;
 $scope.email = varEmail;
 $scope.requestorEmail = varEmail;
 $scope.requestorFullName = varFullName;

 var fullNameArray = varFullName.split(" ");

 var firstNameValue = fullNameArray[0];
 var lastNameValue = fullNameArray[1];

 $scope.firstName = firstNameValue;
 $scope.lastName = lastNameValue;

 

3. When the code is inserted, then save the code, and then upload the form again to the SharePoint site, most likely in the Site Assets document library:

9.SharePointUploadHTMLFile

4. And then the form shows the value of the current details below:

4.SharePointAPIAngularJSForm

 

Dynamics CRM 365: How to add Contacts

In Dynamic CRM 365, the 2 main entities referred to most other entities is the Contacts and the Accounts. Contacts can be most likely treated as clients in some circumstances, so with any data modelling in Dynamics CRM, contacts generally comes into the picture.

=================================================

For any assistant, please email us: bizloadsolutions@gmail.com

=================================================

Here are the steps involved in Creating Contacts in Dynamic 365.

1. From the home page of Dynamics 365, click on Sales > Contacts

1.ClickOnContactsLink

2. Click on the New button

2.ClickOnNewContact.png

3. The Contact form is opened, and the selected details can be completed, such as:

Contact Information, Personal Details, Marketing Details,  Billing Details, Personal Notes, Contact Preferences, Shipping details

3.NewContactForm

4. First details that needs to be inserted is the Contact Information.

By Default, the fields Dynamic CRM comes with are fields such as:

Full Name, Job Title, Account Name, Email, Business Phone, Mobile Phone, and Preferred Method of Contact, Address, Facebook, Twitter, Kiout Score.

4.ContactDetails.png

5. Once completed all the details, click on the Save button, and then contact is created.

5.ContactSaveButton

6. Once clicked on Save button, go back to to Contact list (shown in step 1), when we search the contact list in the search box, the contact person is now listed in the contact list

6.SearchForContact.png

=================================================

For any assistant, please email us: bizloadsolutions@gmail.com

=================================================

 

SharePoint Angular and bootstrap Form – Part 1

hi all,

There are 2 parts of this blog.

1. SharePoint Angular and bootstrap Form – Part 1

2. SharePoint Angular and bootstrap Form – Part 2

This is part 1 of the blog

As InfoPath forms are getting depreciated by Microsoft, and challenges arises how to develop complex online forms in SharePoint, one good answer is develop SharePoint Angular and bootstrap Forms.

This does require a developer who is able to code in Javascript, Angular and cascading style sheets (CSS) in bootstrap.

One good comparison with Angular Forms verses InfoPath forms is with Angular Forms, the attachment file size uploaded can be up to 2GB, where as with InfoPath attachment files are not able to handle large file size attachments such as short video’s, such InfoPath form saves the file directly on the form as base64 string.

=====================================================

For any assistant, please email us: bizloadsolutions@gmail.com

=====================================================

Here are the following steps involved to get started with SharePoint Angular and Bootstrap Forms.

1. To create a Angular js and Bootstrap form in SharePoint, the first thing to do is create a html file on your local machine.

2. To do this, open Visual Studio Code (which you can download for free) or any text editor tool, such as Notepad.

3. And type the following Code:

<!DOCTYPE html>
<html lang="en-US">
</html>

1.CreateHTMLFile

4. And save the file for example, to the name, “MyFirstSharePointAngularForm.html”.

2.MyFirstSharePointAngularForm

The file is saved as HTML file

3.MyFirstSharePointAngularFormFileSaved

5. Go back to Visual Studio Code, and the following reference needs to be added to Visual Studio Code (JQuery, Angular JS, Twitter Bootstrap, JQuery UI (for datepicker control), SharePoint Javascript API):

 https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

 https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- Latest compiled and minified JavaScript -->
 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 https://code.jquery.com/ui/1.12.1/jquery-ui.js

 http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

 /_layouts/15/SP.Runtime.js
 /_layouts/15/SP.js
 /_layouts/15/sp.userprofiles.js

4.ScriptAndLinkReference

6. Then add Angular Module and Controller needs to be created in the code, with 2 example scope variables, called “firstName” and “lastName”.

 var app = angular.module("myApp", []);

 app.controller("myCtrl", function($scope, $location) {

 $scope.firstName = "John";
 $scope.lastName = "Howard";

 });

5.AngularModuleAndControllerCode

7. The create a body tag just below script tag, and add the div tag referencing the Angular app and  controller, and then creating the “firstName” and “lastName” text box, as shown below:

6.BodyCode.png

8. Now in SharePoint, go to site contents:

7.GoToSiteContents.png

9.and go to “Site Assets”

8.SharePointSiteAssets

10. Click on “new document” and upload “MyFirstSharePointAngularForm.html” file.

9.SharePointUploadHTMLFile

11. Now, we need to get the URL of where the file “MyFirstSharePointAngularForm.html” is located in SharePoint. To do this, go to the Library tab on the ribbon, and click on “Open with Explorer”

10.SharePointSiteAssetsOpenWithExplorer

12. Copy and paste the URL of SharePoint “MyFirstSharePointAngularForm.html” into a Notepad.

in this case:

http://…/SiteAssets/MyFirstSharePointAngularForm.html&#8221;

11.SharePointGetURLOfHTMLFile

13. Go to “Site Contents”, and then click on Pages

12.SharePointPagesDocLibrary

14.Go to Files tab in the ribbon, and click on New Document > Welcome Page

13.WelcomePage

15. Put in Title name, in this case, “MyFirstAngularForm”, and in page layout, select “Blank Web Part page”.

14.BlankWebPartPage

And a web page is created in SharePoint:

15.MyFirstAngularForm

16. Click on the web page, and then go to Edit Page Mode

16.EditPage.png

17. Click on “Add a Web Part”, and select “Content Editor Web Part”.

17.ContentEditorWebPart

18. Then edit the Content Editor Web Part

18.EditContentEditorWebPart

19. Then paste in the URL in Content Editor Web Page (that you copied to notepad in step 12), and then click OK.

19.PasteURLInCEWP

20. And then Publish the web page

20.PublishTheWebPage.png

21. Now you can see the Angular Form in the Web Part Page

21.FirstAngularWebPartPageComplete.png

22. Please continue this blog to Part 2, SharePoint Angular and bootstrap Form – Part 2

=====================================================

For any assistant, please email us: bizloadsolutions@gmail.com

=====================================================