Skip to main content

SPFx With React framwork - Reading site properties, React Life Cycle, CRUD Operations

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 .scss file, HTML from .tsx file and an interface properties from .ts file.


From .tsx file, 

className={styles.container} //this is how we can call css from .scss file

<p>{escape(this.props.description)}</p> // this is the way calling the properties from interface .ts file.

Here it is having some value that we are printing.

But the value is coming from manifest.json file under properties description.


SPFX React Reading site properties

Step 1: 

Finding the site url, web url, user name details.

Firstly, going to the interface class and creating properties as below


export interface IWebpartWithReactProps {

  description: string;

  absoluteurl: string;

  sitetitle: string;

  relativeurl:string;

  username: string;

}


In .tsx file, formatting the HTML as below


<p className={ styles.description }>Absolute URL {escape(this.props.absoluteurl)}</p>

              <p className={ styles.description }>Site Title {escape(this.props.sitetitle)}</p>

              <p className={ styles.description }>Relative URL {escape(this.props.relativeurl)}</p>

              <p className={ styles.description }>User Name {escape(this.props.username)}</p>



Step 2: Now go to .ts file.

We can see error in render method.

In React component, we need to supply the values mention for the properties in Interface of .ts file.


We have "this.context.pageContext.web" provides properties for the respective SP site.




const element: React.ReactElement<IWebpartWithReactProps> = React.createElement(

      WebpartWithReact,

      {

        description: this.properties.description,

        absoluteurl: this.context.pageContext.web.absoluteUrl,

        sitetitle: this.context.pageContext.web.title,

        relativeurl:this.context.pageContext.web.serverRelativeUrl,

        username: this.context.pageContext.user.displayName

      }

    );

    ReactDom.render(element, this.domElement);

  }

















React Life Cycle in SPFx

Refer below article for further learning about React Life Cycle using SPFx

Constructor > ComponentWillMount > Render > ComponentDidMount > Custom methods > ComponentWillUnmount 

https://tejasadventure.blogspot.com/2021/07/react-lifecycle-using-spfx.html

Get List Item values and show in a table using rest api get method using React JS


SPFX with React CRUD Operations:



Labels:

Comments

Post a Comment

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...
Post a Comment
Read more

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...
Post a Comment
Read more

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...
Post a Comment
Read more