This blog post helps you to recreate the Outline view of IBM Notes on SharePoint.
- 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
Here’s the existing Notes Outline that needs to be created in SharePoint.
Create a new SPFx project and choose React as the Framework.
Install all the other dependencies.
npm i redux react-redux redux-thunk react-router-dom reactstrap
Install respecting typing modules also
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.
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.
To create full-page webpart, add the below highlighted configuration value in manifiest.json
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
Once a solution file created successfully, open the app catalog in SharePoint online. Upload the created solution file
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”.
To Hide the Title and share options add the following CSS code into your source code