Skip to main content

Posts

Showing posts from September, 2019

SharePoint Framework SPFX deploy in SharePoint

Hi Guys, If you are interested with latest framework of SharePoint (SPFX). I have created a project and deployed successfully in O365 site. I have provided few code samples with steps and procedure to get started.  Go through the below links and the articles. Happy Coding.... Getting Started : Create an SPFX webpart and run it in local host https://tejasadventure.blogspot.com/2019/09/chapter-1-sharepoint-framework-getting.html Create an App Catalog site to deploy our webpart https://tejasadventure.blogspot.com/2019/09/create-app-catalog-in-sharepoint-o365.html Steps to know how to deploy the webpart in SharePoint O365 site https://tejasadventure.blogspot.com/2019/09/how-to-deploy-spfx-webpart-in-to.html Sample project from Git Hub: This project demo of user interface flipcards.  https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/flipcard.aspx Operations performed: RestAPI has used for CRUD operations Framework used:...

Create an App Catalog in SharePoint O365 and upload the sharepoint framework solution to App Catalog

In Order to create an App Catalog in SharePoint, Firstly create an O365 tenant and create SharePoint site collection. 1. Create an O365 tenant Ref:  https://developer.microsoft.com/en-us/office/dev-program Ref:  https://developer.microsoft.com/en-us/office/dev-program 2. Create a new site collection. Ref:  https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant#create-a-new-developer-site-collection 3.  Create an App catalog site, where we can store our custom SpFx webparts and these webparts will be available across all the site collections. Ref: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant#create-app-catalog-site 4. Open "Central Admistration", Click on "Apps" in the left navigation panel. https://<yoursitename>-admin.sharepoint.com/_layouts/15/online/SiteCollections.aspx or https://<yoursitename>-admin.sharepoint.com/_layouts/15/online/tenantadminapps.aspx 5. After...

How to deploy SPFX webpart in to SharePoint O365 site

Let us assume we have spfx webpart running in our local host. How to deploy SPFX webpart in to SharePoint? 1. Stop the gulp serve which will stop running the local host 2.  Unlike in the Workbench, to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint. First you need to package the web part. Open the  MyCustomWebPart  web part solution in Visual Studio Code, or your preferred IDE. 3 .  In the console window, enter the following command to package your client-side solution that contains the web part. Run " gulp package-solution " The command creates the package in the  sharepoint/solution  folder:  webpartname.sppkg The package uses SharePoint Feature to package your web part. By default, the gulp task creates a feature for your web part. You can view the raw package contents in the  sharepoint/debug  folder. The contents are then packaged ...

SPFX how to link the external libraries:

After create an sample spfx webpart with "nojavascript" 1. In visual studio code, open config.json file in your machine (press ctrl+p and type config.json file). 2. external object key shows empty initially. 3. Open Node JS cmd prompt and install requried external library files using npm To Install Jquery : npm install jquery@2 Install Jquery types for typescript handy: npm install @types/jquery@2 Jquery UI npm install jqueryui npm install @types/jqueryui Bootstrap npm install bootstrap Angular: npm install @types/angular --save-dev Under externals key object provide below reference "externals" : {      "jquery" : "node_modules/jquery/dist/jquery.min.js" ,      "angular" : {        "path" :  "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js" ,        "globalName" :  "angular"   ...

SharePoint Framework Getting Started

Learning path for SharePoint Framework Hello Guys, I have listed few blog links below for reference purpose to make it easier to understand or refer the code regarding SharePoint framework. First Learn about scaffold of SharePoint framework: https://tejasadventure.blogspot.com/2020/05/sharepoint-framework-basic-understanding.html SPFX modern pages https://tejasadventure.blogspot.com/2020/06/spfx-modernizing-sharepoint.html 1. Create an O365 tenant Ref:  https://developer.microsoft.com/en-us/office/dev-program 2. Create a new site collection. Ref:  https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant#create-a-new-developer-site-collection 3. Create an App catalog site, where we can store our custom SpFx webparts and these webparts will be available across all the site collections. https://tejasadventure.blogspot.com/2019/09/sharepoint-framework-spfx-deploy-in.html 4. Know how to deploy the solution in to SharePoint catalog. https://tejasad...

CSS media queries with min and max

/*Desktop*/  @media only screen and (max-width: 1366px) and (min-width: 1281px)  {}   /*Ipad*/   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {   }   @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {   }   /*Mobile*/   @media only screen and (min-device-width: 1px) and (max-device-width: 767px) and (orientation: landscape) {   }   @media only screen and (min-device-width: 1px) and (max-device-width: 767px) and (orientation: portrait) {   }