Difference between event receiver and workflow?

Ans

Event receiver	Workflows
1) Event receivers in SharePoint can be executed before or after an operation, like before adding an item or after adding an item.	1) workflows can be executed only after the operation happed like after an item added to the list or after an item update.
2) The event receivers in SharePoint 2013 or event receivers in SharePoint 2016 cannot be launched manually. They always attached to a SharePoint object which will run automatically when the event occurs.	2) workflows can be started automatically as well as can be started manually also.
3) You can cancel the operation like adding an item	3) You cannot cancel the action as the item is already added.
4) You can create an event receiver only in Visual Studio	4) You can use any tool like SharePoint designer, Visual Studio, Visio, 3rd party apps, etc.
5) No UI interaction	5) Can use forms like initiation form, association form, etc.
6) Can be run for a very short period of time.	6) Can run for days, weeks or even years.
7) Will not survive after server reboots	7) Will survive after server reboots

What are Event Receivers ans its types?

Ans

The event receiver is simply a method that is called when a triggering action occurs on a specified SharePoint object.

Two types of event receivers:

a) Synchronous: Events are executed before the action is executed on the content database.

b) Asynchronous: Events are executed after the action is executed on the content database.

What is the difference between SharePoint Online and SharePoint On-premise?

Ans

Online	On-premise
1) No need of hardware to buy. All updates and patches are taken care by Microsoft	1) Resource requirement: you need more resources to maintain the server, to add updates and patches. This means a requirement of more people and hardware.
2) Information stored in the cloud	2) Information lies in your local environment
3) Cost is less and is billed monthly per user.	3) Cost is more as it requires more resources, hardware, and maintenance
4) Powershell control is reduced as compared to on-premise.	4) More PowerShell control

What is the difference between Sharepoint-hosted apps and Provider-hosted apps?

Ans

Sharepoint-hosted apps	Provider-hosted apps
No server-side code, 100% client-side code	Server-side coding is used. Managed code and high trust
Can be developed using HTML5, CSS, JavaScript, jQuery, ASP.NET Ajax, CSOM, REST API, Silverlight, KnockOut JS, Angular JS	Any programming language can be used
Data Storage Locations: SharePoint Online, Content Database	Data Storage Locations: ISV Storage, Azure Storage, Content Database.
Can be hosted on either SharePoint on-premises or office 365	Deployed outside the SharePoint farm

What is App-model in SharePoint and its types?

Ans 

Sharepoint apps are also called as SharePoint add-in. A SharePoint Add-in is a self-contained piece of functionality that extends the capabilities of SharePoint websites to solve a well-defined business problem.

There are two types of SharePoint Add-in

1. SharePoint hosted apps
2. Provider-hosted apps

SharePoint Hosted App

SharePoint hosted apps are those apps, where all the components are hosted on  SharePoint only.

SharePoint-hosted apps are installed on a SharePoint website, called the host web. They have their resources hosted on an isolated subsite of a host web, called the app web.

Provider Hosted App

Provider-hosted apps for SharePoint include components that are deployed and hosted outside the SharePoint farm.

They are installed to the host web, but their remote components are hosted on another server. i.e. App web for provider hosted apps is completely a different server (provider).

What is the SharePoint Document Library?

Ans

A document library allows users to easily store, upload, share, collaborate, and track documents or files. Similar to lists, we can create columns in a document library which represents the metadata for the uploaded documents.

What is SharePoint List?

Ans

SharePoint list is a collection of records related to an entity. These records in the list are termed as items. SharePoint list provides a feature to add a different type of fields which are termed as list columns.

What is a Content type?

Ans

According to Microsoft, A content type is a reusable collection of metadata (columns), workflow, behavior, and other settings for a category of items or documents in a SharePoint list or document library. Content types enable you to manage the settings for a category of information in a centralized, reusable way.

What is Site Column?

Ans

According to Microsoft, “A site column is a reusable column definition, or template, that you can assign to multiple lists across multiple SharePoint sites. Site columns are useful if your organization wants to establish some consistent settings across lists and libraries.”

Difference between list and library in SharePoint?

Ans

Lists:

Can have attachments

Have major versions only

Do not have Check-in/Check-out features

Libraries:

Cannot have attachments (files are directly in the library)

Have both minor (draft) and major (published) versioning

Have Check-in/Check-Out

How to add custom .css and .js file in SharePoint master page?

Ans

If you just want to add a custom CSS and JS to your master page, then instead of creating a new master page, try the following and check if it works for your purpose.

For Custom CSS : Use the Alternate CSS Url to set a custom CSS File.

Upload your custom CSS file to Style Library or Site Assets

Go to site setting > Look and Feel > Design Manager > Publish and Apply Design > Assign Master Page based on device channel .

                                                        

At Alternate CSS URL > Specify a CSS file to be used by this site and all sites that inherit from it: > Browse your file.

Check Reset all subsites to inherit this alternate CSS URL if you need to apply this for all Subsite.

                                                               or

<SharePoint:CssRegistration ID="CSSCustom" Name="&lt;% $SPUrl:~sitecollection/SiteAssets/css/FileName.css %&gt;" runat="server" After="Themable/corev15.css"/>

For referring a custom JS file follow this approach -

You can upload your JavaScript file in the Style Library and use the SharePoint:Scriptlink tag in Master Page to load it.

For example:

If you have a js file called YourScriptName.js. Goto Site Contents -> Style Library, create a folder for your custom scripts to lie, and upload the one which you want to use.

Then open up your master page and in the header section add a Scriptlink tag to load the js file.

<SharePoint:Scriptlink ID="Scriptlink9" runat="server" name="~SiteCollection/Style Library/YourFolderName/YourScriptName.js" language="javscript" />

The above tag goes in Master Page.

How to Customize List View in SharePoint Online using JSLink?

Ans
JSLink is a new approach combining JavaScript, HTML and CSS elements to customize the look of a SharePoint list views, list forms, and can control the rendering of fields. JSLink was introduced in SharePoint 2013.
 The power of using JSLink is that it uses JavaScript and runs in the client and you can use all the powerful JavaScript libraries and for its easy to debug.

In this example, we are going to customize view of task list. Task list has default column with internal name PercentComplete. This column stores %age task completion, we will add conditional formatting to this column.
Default View:

Final View:

Steps to do it?

Step 1: Create a JavaScript code file to override default view
Step 2: Upload JavaScript file to Master Page Gallery –> Display Templates folder
Step 3: Set JS Link Property of List view web part to Url of uploaded JavaScript file.

Step 1: Create a JavaScript code file to override default view
In the first step, we need to develop the JavaScript code file that will contain the customization logic.

Simple example:
The following code shows a simple function that will display description field in the list in italics.

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {‘Description’: { ‘View’: ‘<i><#=ctx.currentItem.Description#></i>’ }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

overrideCtx variable holds the current context of the list item.
Templates.Fields property provides access to individual list fields.
RegisterTemplateOverrides function call registers the templates for your list to use.


Main Code to customize PercentComplete column in task list
CustomizeTaskCompletionView.js
(function () {

// Initialize variable that will store overrides objects.
var overrideCtx = {};

overrideCtx.Templates = {};
overrideCtx.Templates.Header = “”;
overrideCtx.Templates.Footer = “”;
overrideCtx.Templates.Fields = { ‘PercentComplete’: { ‘View’: CustomProgressBar } };

// Register template overrides.
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();
function CustomProgressBar(ctx) {
var percentage = ctx.CurrentItem.PercentComplete;
var percentageNr = ctx.CurrentItem.PercentComplete.replace(” %”, “”);
var duedate = new Date(ctx.CurrentItem.DueDate);
var color = getCompletion(percentageNr, duedate);
return “<div style=\”background: #F3F3F3; display:block; height: 15px; width: 120px;\”><div    style=\”background: ” + color + “; height: 100%; width: ” + percentageNr + “%;\”></div></div> ” + percentage + “”;

}

function getCompletion(progress, duedate) {
var datenow = new Date();
if (parseInt(progress) < 100 && duedate.getTime() < datenow.getTime())
return “Red”;
else
return “Green”;
}

Step 2: Upload JavaScript file to Master Page Gallery à Display Templates folder
Navigate to Site Settings –> Master Pages and page layouts –> Display templates folder

Upload JavaScript file CustomizeTaskCompletionView.js created in step 1 to this folder.

Content type –> JavaScript Display Template
Target Control Type –> View
Standalone –> Override
Target Scope –> /

Step 3: Set JS Link Property of List view web part to Url of uploaded JavaScript file.
Navigate to Task list and edit list view WebPart, I have opened Workflow Tasks list

You will see JSLink property under Miscellaneous section

If JSLink property is missing, In Office 365, go to your SharePoint Admin Center –> Settings and enable custom script.

It may take upto 24 hours before you start seeing JSLink property once you enable it.
Once property is visible, provide uploaded JavaScript URL. We cannot give absolute path, we will have to use site collection token representation like this:

~sitecollection/_catalogs/masterpage/Display Templates/CustomizeTaskCompletionView.js

~sitecollection The URL of the parent site collection of the current website.
Save changes and add new task to this list. It will look like this:

What are Webparts and Webpart Zones?

Ans

WebParts 

Web Parts are self-contained packages of user interface that can be dropped onto a SharePoint Web Part page to provide discrete set of functionality to the users. They can simply be described as re-usable Code units.

Webpart Zones

Web part zones are what your web parts reside in. Each webpart zone can contain number of webparts and can be positioned in a specific way to create a webpart Layout Page.

What are Master pages and Page layout in SharePoint?

Ans

Master page

These are the pages that provide a consistent layout and appearance (look and feel) for SharePoint sites. A master Page consist of a Site logo, Top navigation, left navigation(some cases) and a footer. In SharePoint Master Pages are stored in _catalogs folder or Master Page Gallery from UI.

Page layout 

A Layout page defines the Layouts(structure including Webpart zones) of a content page in SharePoint. Layout pages are not same as Master Page. A Layout Page is contained inside the content area surrounded by mater Page.

What are Application Pages, Site Pages and Content Pages?

Ans

Application Pages - An application page is deployed once per Web server and cannot be customized on a site-by-site basis. They stay in 12 hive folder structure, mostly under layouts folder.

Site Pages - These are pages that make up the site interface and are specific to one site or site collection.They mostly get stored in the content database of the site collection.

Content Pages - Site Page which contains webpart or other custom components. This Page is stored in database. They mostly get stored in the content database of the site collection.

What is a Site definition and Site Template?

Ans

Site definition

A Site definition is a collection of Files such as ONET.XML which defines the Site template for e.g. Team Sites used to create a Site in SharePoit. All the out-of-box site Templates like Blog,Wiki,Team Site etc can be found in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\

Site Template

Any Site along with the content can be saved as a template. If a site is saved as a Template it is stored in Site templates folder as a .stp file. This template is then re-used to create a new site which will have the pre-saved settings.

Can we create Web Application in SharePoint Online?

Ans 

We are able to create several site collection in SharePoint online and change its configuration but we can’t make any web application or change web application setting for your existing site collections.

What is the difference between Authentication and Authorization in SharePoint?

Ans

Authentication is the process by which the identity of a user who requests access to a SharePoint web application is verified.  

Authorization, which is the process by which a user is granted access to specific resources within a SharePoint site.  

Simply put, Authentication controls whether or not a user has permission to access sites on a SharePoint web application.  Authorization controls what documents, lists, libraries, etc. a user can access on a SharePoint site once they have been successfully authenticated.

SharePoint 2013 supports the following authentication types:

• Windows authentication
• Forms-based authentication
• SAML token-based authentication

Why we should go for SharePoint framework or its benefits?

Ans

• It runs in the user context so only the allowable data content will be displayed to an end-user.
• It is light-weight, fast and responsive as SPFx is completely a client side and uses NodeJS. It is compatible with the Office Fabric UI components and becomes responsive.
• When the server-side solutions are not used wisely, they might cause a damage from a site collection to an entire SharePoint farm. One can mitigate this risk using the client-side development which is supported by the SPFx.
• If one’s online tenant is either running on the old SharePoint 2013 classic mode or upgraded to latest tenant feature, then one can have a back seat and relaxed as the SPFx is compatible with both the modern as well as classic pages.
• In the erstwhile client-side code, one is required to use some extra variables and make some calls for fetching the configurations. Now, this becomes very convenient to use with the SPFx as one can assign the properties of a custom client-side web-parts and configure it accordingly.
• The SPFx provisions its own deployment mechanism which includes the app bundling, the app packaging, the app shipping to store (or to local SharePoint App Catalog) and deployment in the tenant with the proper permission. The whole process is managed in better way for the client-side web parts.
• If one is not having internet connection, then also one can develop on the SPFx coming with a local workbench which is effective in developing and testing of a client-side web-parts.
• It is scalable as not being limited to SharePoint. One can use NodeJS and other component available in NodeJS community in the SPFx client-side development. A client-side web part can be made to interact with Office365, Azure, One Drive, Outlook, etc. with the Microsoft Graph API development.
• No specific machine related requirement is necessary for the development. One can use any machine-like Windows, Mac or Linux for the client-side development. The only necessity is to set-up the development environment through NodeJS, Gulp and Yeoman template installation of the framework. To develop SPFx web-parts, one is simply required having any text editor.
• The business logic or code of a client-side web-part is secured as it can’t be accessed from the page source or browser inspect.

How to deploy the spfx webpart?

Ans   Steps of deployment of SPFx solution in SharePoint page

• Launch the console window and set console path to our SPFx web part directory. If Yeoman server is running on a console you have to stop it by Ctrl+C command followed by Y. 

• gulp clean command: This command clean the project deployment file .sppkg which is present in folder sharepoint under project directory and also creates debug solution file. 

• gulp bundle –ship command: This command help to create minified files for build the solution and also generate debug bundle under dest folder. This builds the minified assets required to upload to the CDN provider. The minified assets can be found under the temp\deploy directory. 

• gulp package-solution –ship command: This creates the updated client-side solution package in the sharepoint\solution folder. Created file: sharepoint\solution\ms-hello-world.sppkg 

• Now upload or drag an drop solution package file from sharepoint\solution\ms-hello-world.sppkg to App for sharePoint library in app catalog site. 

• Once our SPFx web part package has finished uploading, we will be prompted with a dialog window to complete the deployment. This is where you will choose whether to deploy to all sites within your tenant or to all subsites within your site collection. Make your selection and then click the Deploy button. 

• We have deploy our Hello World SPFx web part. Now we need to add it on modern SharePoint site page.

• From + Add a new web part icon we select our WP Hello World web part and save it. 

Note: In case we did not select “Make this solution available to all sites in the organization”, we would first have to add SPFx web part to respective site and then we add on page.

On SPFx web part creation SharePoint Youmen Generator will ask “if you would like to allow the tenant admin the ability to deploy the solution to all sites.” If we say Y yes then skipFeatureDeployment property set to true in the package-solution.json file. We also manually set this property from package-solution.json file.

How we can use SharePoint framework client side webpart in classic pages?

Ans 

Add SharePoint framework client web part to classic web part page

First, we need to add the SharePoint framework client web part to the SharePoint classic site.

Open the SharePoint site and then click on the Settings icon and then Add an app.

You can see the spfx client-side web part in the site content. Click on the web part to add the web part to the SharePoint classic site.

Once the client-side web part added successfully, Open a web part page and click on Add a web part. Then you can see in the Other web part category, you can see the spfx client-side web part.

Once you add the sharepoint framework client web part to the SharePoint classic web part page, it looks like below:

What is Redux?

Ans

• Redux is a predictable state container for JavaScript applications. 

• It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

• Simply put, Redux is a state management tool. While it’s mostly used with React, it can be used with any other JavaScript framework or library. 

• It is lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.

• With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.

What is the difference between local workbench and Actual site workbench?

Ans

A Workbench is a tool where the developer can host and test their SharePoint Framework solution.

The Workbench is reactive and will automatically reload artifacts when the developer saves a file so that developers can see and test the solution quickly.

There are two versions of the Workbench.

1) Hosted outside SharePoint

2) Hosted inside SharePoint

•  One is outside of SharePoint, hosted locally on the development machine that runs offline without SharePoint access and SharePoint data.

• This allows the team and designers to build and design solutions with mock or fake data to focus on the user interface.

• This enables us to quickly test the web part without deploying in SharePoint.

• This includes the client-side page and the client-side canvas in which we can add, delete, and test our web part in the development phase. 

• When we execute the “gulp serve” command the local workbench starts. This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and launches our default browser to test web parts from our local dev environment.

• https://localhost:4321/temp/workbench.html -This HTML page is served from the local file system by Node.js and is loaded in the browser.

The second version is hosted inside SharePoint and is used when we need to test and verify the SharePoint Framework solution by using real SharePoint data and context.

URL - (Our site URL)/_layouts/15/workbench.aspx 

How you handle multiple textbox values on single handler in react js?

Ans

You can control the values of more than one input field by adding a name attribute to each element.

When you initialize the state in the constructor, use the field names.

To access the fields in the event handler use the event.target.name and event.target.value syntax.

To update the state in the this.setState method, use square brackets [bracket notation] around the property name.

class MyForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      username: '',

      age: null,

    };

  }

  myChangeHandler = (event) => {

    let nam = event.target.name;

    let val = event.target.value;

    this.setState({[nam]: val});

  }

  render() {

    return (

      <form>

      <h1>Hello {this.state.username} {this.state.age}</h1>

      <p>Enter your name:</p>

      <input

        type='text'

        name='username'

        onChange={this.myChangeHandler}

      />

      <p>Enter your age:</p>

      <input

        type='text'

        name='age'

        onChange={this.myChangeHandler}

      />

      </form>

    );

  }

}

ReactDOM.render(<MyForm />, document.getElementById('root'));

How we can get current site url in Sharepoint framework?

Ans   To get the URL of my SharePoint site.

this.context.pageContext.site.absoluteUrl

Why we use constructor() and super() in class?

Ans 

constructor() 

• The constructor is a method that’s automatically called during the creation of an object from a class.
• It can be used to bind event handlers to the component.
• It can be used for initializing the local state of the component.
• The constructor() method is fired before the component is mounted.
• When you call the super() method, it calls the constructor of the parent class which in the case of a React component is React.Component

super()

super() is called inside a react component only if it has a constructor. For example, the below code doesn't require super:

class App extends React.component {

    render(){

        return <div>Hello { this.props.world }</div>;

    }

}

However if we have a constructor then super() is mandatory:

class App extends React.component {

    constructor(){

        console.log(this) //Error: 'this' is not allowed before super()

    }

}

The reason why this cannot be allowed before super() is because this is uninitialized if super() is not called. However even if we are not using this we need a super() inside a constructor because ES6 class constructors MUST call super if they are subclasses. Thus, you have to call super() as long as you have a constructor. (But a subclass does not have to have a constructor).

We call super(props) inside the constructor if we have to use this.props, for example:

class App extends React.component{

    constructor(props){

        super(props);

        console.log(this.props); // prints out whatever is inside props

    }

}

What is props and state in react

Ans:
Props

• The props are read-only properties we set values to when we call our React component. 
• They are a way to transfer information from the parent component to the child. 
• We can also use them in your React component to control how it behaves in different situations – when different kind of data is passed down to it.

State

• The state can also be used for controlling, e.g., how our component is rendered. 
• What makes state different from props is that we can change its values.
•  We typically initialize state with null values in the constructor and later change the values when something happens in the component to reflect that change – the new state of the component.

Remember when  render() method is executed whenever the props or state changes? we can change the state by calling the this.setState() method, and that will make our render method execute again, taking into account the new state values. There is also another way to set state: this.state = { ... } but that should only be used in the constructor as it does not trigger the render method execution.