SharePoint & Power Apps Learning

Basic Understanding of Code in React Framwork In .ts file we can see a change with Jquery now is In render method, We can see element variable holding the properties. And this element is assigning to the current dom element. We can observe components folder with Interface file, scss , and on .tsx file Components folder .ts In components folder, .ts file has interface properties. In our react component, if we want to use as many as properties we have to instantiate here in the interface section. By default one property called description: string. Components folder .tsx We can observe importing the react framework from dependencies. Importing styles from .scss file Importing Interface properties from .ts interface file  In SPFX react, first I have created an App with react framwork and open the code in VS Code. It contains a separate render() method and contains return statement with HTML inside. Here we need to understand that react is component approch. Each component contains .scs...

Creating a react scaffold. Here, we are using Jquery and therefore we need to install Jquery and Jquery types. Installation of Jquery and Jquery types We have SoftwareCatalog SharePoint list, we are going to show list items in a table using SPFx react js. Once after creating react scafold, Install Jquery  npm install --save jquery then Install jquery types npm install --save @types/jquery Create State Interface First in interface of .ts file, we added websiteurl:string export   interface   IReactShowListItemsProps  {    description :  string ;    websiteurl :  string ; } In main .ts file, we have calling url websiteurl :   this . context . pageContext . web . absoluteUrl or Refer below public   render ():  void  {      const   element :  React . ReactElement < IReactShowListItemsProps > =  React . createElement (        ReactShowListItems , ...

 The patter of calling the methods in SPFx React life cycle are as below Constructor method > ComponetWillMount >  render method > ComponentDidMount > any custom methods on either button clicks > ComponentUnmount In React, we just observe render method. But there are other methods which we can go through. Step 1: First, I am creating a blank webpart with react framework. Step 2:  Now in tsx file, we are going to create an interface. We are not using the interface which has in components folder .ts file for interface. export interface IReactLifeCycleWPState{   stageTitle: string } Now, we need to extend in the .tsx file HTML part with our new interface we created. We are adding  IReactLifeCycleWPState  Interface to our default export class as below. export default class Reactlifecyclewebpart extends React.Component<IReactlifecyclewebpartProps, IReactLifeCycleWPState > { Now, we need a constructor in .tsx file. We are using a parameterize...

 In SpFx we have extensions as similar to webparts, library. In short, extensions are more like injects scripts to our SharePoint page. In our previous session, we discussed about the library in SPFX. https://tejasadventure.blogspot.com/2021/07/spfx-create-custom-library.html Create a demo now: Create a scaffold. Select the client side component - choose "extension". Application customizer: 1. which client side extension do you want to create - choose "Application customizer". 2. open in VS code. 3. We can see boiler plate code. 4. Under manifeast.json file we can obser    "componentType" as "Extension",   "extensionType" as "ApplicationCustomizer", 5. In .ts file, We can see interface has one property called textMessage: string.  Now go to the config folder, you can see serve.json Using serve.json file, we can Inject the code to our SharePoint page. In serve.json, we can find property called textMessage, It has value as well....

 Since we will be deploying in our office 365 tenant environment, I am selecting "Yes" and choosing "Library". note that library is a class that has functions we are utilizing now. Step 1: In MyNewCustomLibrary class, I have create a function as below public   getCurrentDateTime ():  string {      let   currentDate : Date ;      let   str :  string ;      currentDate  =  new   Date ();      str  =  "<br>Today Date is: " + currentDate . toDateString ();      str += "</br>Time is: " + currentDate . toTimeString ();      return   str ;   } In package.json, we can find the library name and customlibrary.ts is our class name MynewcustomlibraryLibrary. Version, dev dependencies are common. We can do gulp build and make sure no errors. Now we have to create a webpar...