This blog post helps you to recreate the Outline view of IBM Notes on SharePoint.

Prerequisites:

  • SharePoint Framework development Environment
  • SharePoint Online
  • This uses React, Redux, Reactstrap and React Router
  • React – Front End Framework.
  • Redux – Store to communicate/share data between component
  • Reactstrap – A Bootstrap 4 component for React
  • React Router – For routing in React

Learn from

1) https://www.c-sharpcorner.com/article/sharepoint-framework-aka-spfx-web-part-using-react-rest-api/

2) https://reactstrap.github.io/components

3) https://github.com/BilalBouk/reactstrap-basic-sidebar

4) https://yannickborghmans.com/2019/05/08/getting-started-with-redux-in-sharepoint-framework/

5) https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages

 

Here’s the existing Notes Outline that needs to be created in SharePoint.

STEP 1

Create a new SPFx project and choose React as the Framework.

STEP 2

Install all the other dependencies.

npm i redux react-redux redux-thunk react-router-dom reactstrap

STEP 3

Install respecting typing modules also


STEP 4

Create a component for navigation and container. Create a folder called content and sidebar. Under the Content folder, create the js files ‘Content.js’ and ‘Navbar.js’.

Content.js is responsible for holding all the necessary code for displaying the right-side container. Since SharePoint does not support functional component, make sure of using class-level component while developing in SharePoint.

The Navbar.js is responsible for displaying the content header. This section holds the menu-toggler icon. By clicking on this link, the left side menu will be toggled.

STEP 5

Under ‘Sidebar’, create another new file called SideBar.js and SubMenu.js. The Sidebar.js contains all the necessary code for displaying the sidebar menu. The SubMenu.js holds the logic of creating the submenu.

The sidebar source code can be referred from the link shared above.

STEP 6

To create full-page webpart, add the below highlighted configuration value in manifiest.json

STEP 7

To deploy the above code run the below comments. Running the below commands creates sppkg in your target path

gulp bundle –ship

gulp package-solution –ship

STEP 8

Once a solution file created successfully, open the app catalog in SharePoint online. Upload the created solution file

STEP 9

To deploy full-page webpart, navigate to any modern site collection and click on New -> Page. Then Navigate to App Tab. Now, you can see deployed a single page web part. Choose a particular webpart and click “Create Page”.

STEP 10

To Hide the Title and share options add the following CSS code into your source code

Final output in SharePoint