Categories
REACT SharePoint

Using REACT

As noted in my last post, I have been learning REACT and I actually enjoy it. I thought it would be complex but it really isn’t. It truly is JavaScript! What makes REACT seem complex to many, including myself in the beginning, is JavaScript XML( JSX), but it really isn’t as difficult as many may think.

In this post, I will break down the basics of REACT and try and shed a little light on JSX. To really understand REACT or JSX, I would recommend going to their site. Let’s get started with the famous HELLO WORLD example.

To begin, you need to make sure you have a reference to the right libraries to use REACT. The below is from the REACT site.

You will also need a reference to babel in your file which helps to convert JSX into JavaScript. The below reference is from the CDN site

You will need a reference to all three files in your html if you will be doing client side development in SharePoint.

For the ‘Hello World’ example, you will need a DIV tag with an id=’root’ in your html file. The id name can be any name you choose. In my example below, I chose to use ‘app’.

In your JavaScript file, you will use REACT to define what needs to be rendered in your div. You do that by using

ReactDOM.render(argument1, argument2);

argument 1 is the what (what will be rendered to the page)
argument 2 is the where (where will your what be rendered to), which will be my div of id=app

Codepen

In the example above, argument 1 is <h1>Hello World!!!</h1> and argument 2 identifies where argument 1 will be rendered to by using document.getElementById(“app”)

argument 1 is JSX even though it looks like HTML. It is really an extension of JavaScript. The babel library helps to compile it to JavaScript. You can also embed expressions in JSX just as you see in the example below that I copied from the REACT site.

There is a whole lot that you can do with REACT. The power of REACT comes when you learn how to use components and props.

I hope you enjoyed and learned something from this post. Make sure you stop by the REACT site and also check out my videos on my channel on how I use it with SharePoint. I also provide the github files with my videos. If you have any questions, please leave your comments.

Categories
SharePoint

What I’m learning during the Pandemic

First off, I hope you are doing well and staying safe during this time of the covid-19 pandemic. I hope your families and friends are safe as well. My prayers goes out to all nurses and doctors that risk their lives in the service of others. Whether you believe COVID is real or not, be nice and kind to people’s choices.

I recently came across a quote that says, “Life keeps throwing me stones. And I keep finding the diamonds…” –Ana Claudia Antunes
When the pandemic first started and we got the order to stay home, one of my initial thoughts was, how do I take advantage of this time and come out from this a better person in every aspect of my life. How do I find the diamonds? I decided to change and develop a few new habits. In this post, I would like to share with you a new habit I decided to pick.

Self-development

I believe in self-development. I believe I have massive potential (we all do) given to me by the creator and I am always striving to reach it. I will never stop striving to be better than I was yesterday. Life is about growing and progressing, therefore, I have decided to change the time I wake up in the morning. I now wake up between 3 and 5 a.m. I used to wake up between 5 and 6 a.m but since my kids are home, I need to be up much earlier before they wake up. My new habit takes discipline and determination. When I get up that early, I say my prayers and read my scriptures, something I’ve always done. I work on my spirituality because I want to be closer to my Heavenly Father who I let guide me in all I do.
I then work on learning REACTjs which I am starting to understand. The company I work for offers Udemy to all employees and I take advantage of that. There’s an excellent course on Udemy called, “Hello React – React Training for JavaScript Beginners” by Rob Merrill. After completing that course, I also completed Bob Ziroll’s course called “Learn React”. These two course are excellent and gave me a solid foundation of REACT. It gave me enough knowledge to learn how to use it with SharePoint. I am also going through Ziroll’s REACT Bootcamp. I have started creating videos on my Youtube channel to show how I use REACT with SharePoint and comparing it with VUE.
As a SharePoint developer, I have SharePoint on the learning list, diving deeper into the technology. I wish to learn the new apps such as powerAutomate and powerApps. I also plan on learning the new SharePoint SPFx framework.

Conclusion

I have chosen to make the best out of this pandemic situation and to learn everything I can to make myself more marketable when this all ends. To get to where I need to be requires discipline and focus. I fall off the wagon once in a while with my new habit but I make sure I get right back on and not forget why I began the journey. Most importantly, I enjoy the journey/process because that’s where all the refining happens and where I find the nuggets of diamonds.

I would appreciate any thoughts you have. What are you learning during this time?

Categories
SharePoint

SharePoint Saturday VA Beach

I had the opportunity to do a session at SharePoint Saturday VA Beach and it was great. My session was on ‘Using Vue.js with SharePoint’.

Here’s the location to the files of the demo in that session: https://github.com/isogunro/SharePointSaturday

If you have any questions, please leave a comment and I will try and help.
You can also view content from me on my YouTube channel.

Enjoy!

Categories
SharePoint

Richmond – SharePoint Saturday 9/28/19

I recently had the opportunity to speak at SharePoint Saturday in Richmond, VA. My session was on “Using Vuejs with SharePoint”. I showed how I created a helpdesk form and a simple dashboard. I went over a Vue introduction and discussed components and props. Below is my code I promised to Share.

Codepen: https://codepen.io/isogunro/pen/WNeBjQa?editors=1010

The code for the dashboard files can be found here: https://gist.github.com/isogunro/dbfffd156122d5b9a1cc147f34ebd6b7

The code for the helpdesk form can be found here: https://gist.github.com/isogunro/2af92cd6a30c082c510d78bec0b689dd

My YouTube Channel: https://www.youtube.com/channel/UCo5KIzVY4EFht7Qjd2KXwlw

Categories
SharePoint

SharePoint Saturday Charlotte 8/10/19

I had the opportunity to lead a SharePoint session today at SP Saturday Charlotte. The topic was using VUE.js with SharePoint. I promised that I would provide the code and the codepen I Shared.

Codepen: https://codepen.io/isogunro/pen/aeRNZL

The help desk code on Gist can be found at this blog post from a previous SP Saturday I did.

https://gist.github.com/isogunro/f438a23648c8d9cc3ac43389cb697c5a.js
expansion.html & expansion.js
<head>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
</head>

<body>
<div id="app">

<v-app id="inspire">
    <v-expansion-panel inset focusable>
      <v-expansion-panel-content lazy
        v-for="(item,i) in expansion"
        :key="i"
      >
        <template v-slot:header>
          <div>{{item.Title}}</div>
        </template>
        <v-card>
          <v-card-text>{{item.Details}}</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script>
new Vue({
    el:"#app",
    data: {
        expansion: []
    },
    created: function(){
        this.getListData();
    },
    methods: {
        getListData: function(){
            var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";

            var vm = this;
            axios.get(endPointUrl).then(function(response){
                vm.expansion = response.data.value;
            })
            .catch(function(error){
                console.log(error);
            })
            .then(function(){
                console.log("Always executes")
            })
        }
    }
})
Categories
SharePoint

Microsoft Flow – Create Folder and Break-Inheritance

Recently, I took upon myself the challenge of automating a manual process for the first time using Microsoft Flow. The purpose was to teach myself flow and boy did I learn a ton and had a lot of fun doing it.

Think of HR in your company using SharePoint to manage their new employees. Whenever an employee joins the organization, they create a folder in the name of the new employee in SharePoint and then break inheritance so only that user can have access to the folder. Imagine doing that for hundreds of new folks at a time. That can become quite tedious.

Here’s how I automated that process in Flow.

Here’s my setup:
— I have a SharePoint List named ‘Onboarding List’ (It can be names whatever you want) with the following columns
** Employee Name (Person or Group)
** Department (Choice column of all departments)

— I have a document library named ‘Onboarding Library’

Here’s my flow and a link to a video showing two methods on how to create a document library using Flow.

In the video, I did not show what action to use to create the panel for the api, so I will provide that step here.

Before creating either method 1 or method 2 below, follow these steps below:

Step 1: Add an action


Step 2: Search for ‘Send HTTP’ and select ‘Send an HTTP request to SharePoint

Step 3: Fill in the details. You can click on the ellipsis (…) to rename appropriately.

Method 1 on Creating a folder (video)

Method 2 on Creating a folder (video)

Breaking Inheritance

Categories
SharePoint

Using Vuetify (Datatables component) in SharePoint

Vuetify is an awesome material design framework for Vue.js. I really think it’s name should have been Vuedoo because of the amazing components you can leverage in your SharePoint applications. Here’s a recent video I created and the code I used in the video.

<head>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
</head>
<div id="app">
{{test}}
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="dataTable"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.Title }}</td>
<td class="text-xs-right">{{ props.item.Details }}</td>
<td class="text-xs-right">{{ props.item.keep }}</td>
</template>
</v-data-table>
</v-app>
</div>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/datatable/datatable.js"></script>
view raw datatable.html hosted with ❤ by GitHub
new Vue({
el: "#app",
data: {
dataTable: [],
test: "HELLO THERE!!!",
headers: [
{ text: 'Announcements', value:'Title'},
{ text: 'Details', value: 'Details' },
{ text: 'Keep', value: 'keep' }
],
},
created: function(){
this.getListData();
},
methods: {
getListData: function(){
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
var vm = this;
axios.get(endPointUrl).then(function(response){
vm.dataTable = response.data.value;
})
.catch(function(error){
console.log(error);
})
.then(function(){
console.log("Always executes")
})
}
}
})
view raw datatable.js hosted with ❤ by GitHub
Categories
SharePoint

SharePoint Saturday Vuetify DataTable Code

Here’s the DataTable code from my session at Microsoft in Reston, VA (6/1/19).

<head>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" />
</head>
<div id="app">
{{test}}
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="dataTable"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.Title }}</td>
<td class="text-xs-right">{{ props.item.Details }}</td>
<td class="text-xs-right">{{ props.item.keep }}</td>
</template>
</v-data-table>
</v-app>
</div>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/datatable/datatable.js"></script>
view raw datatable.html hosted with ❤ by GitHub
new Vue({
el: "#app",
data: {
dataTable: [],
test: "HELLO THERE!!!",
headers: [
{ text: 'Announcements', value:'Title'},
{ text: 'Details', value: 'Details' },
{ text: 'Keep', value: 'keep' }
],
},
created: function(){
this.getListData();
},
methods: {
getListData: function(){
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items";
var vm = this;
axios.get(endPointUrl).then(function(response){
vm.dataTable = response.data.value;
})
.catch(function(error){
console.log(error);
})
.then(function(){
console.log("Always executes")
})
}
}
})
view raw datatable.js hosted with ❤ by GitHub
Categories
SharePoint

SharePoint Saturday Help Desk Code

Today (6/1/2019) I gave my first presentation at SharePoint Saturday in Reston, VA. My presentation was on how to use VUE.js with SharePoint. I had created a simple help desk form to explain how Vue instance, Vue-Directives, Methods, and life cycle hooks (specifically ‘Created’) worked. Below is the code I promised to share.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!– Special version of Bootstrap that only affects content wrapped in .bootstrap-iso –>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!– Inline CSS based on choices in "Settings" tab –>
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: #54787c}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: #ffffff !important;}.bootstrap-iso .form-control:focus { border-color: #e9666c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6);} .asteriskField{color: red;}.bootstrap-iso form .input-group-addon {color:#555555; background-color: #f7efef; border-radius: 4px; padding-left:12px}</style>
<!– HTML Form (wrapped in a .bootstrap-iso div) –>
<div id="app">
<p v-if="errors.length" style="color:red">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!– Start Your Name Field–>
<div class="form-group ">
<label class="control-label " for="name">
Your Name *
</label>
<input class="form-control" id="name" name="name" type="text" v-model="name"/>
</div>
<!– End Your Name Field–>
<!– Start phone Field–>
<div class="form-group ">
<label class="contrl-label " for="phone">
Office Phone
</label>
<input class="form-control" id="phone" name="phone" type="text" v-model="officePhone"/>
</div>
<!– End phone Field–>
<!– Start location Field–>
<div class="form-group ">
<label class="control-label " for="location">
Location
</label>
<input class="form-control" id="location" name="location" type="text" v-model="location"/>
</div>
<!– End location Field–>
<!– Start email Field–>
<div class="form-group ">
<label class="control-label " for="email">
Email
</label>
<input class="form-control" list="siteUerEmails" id="email" name="email" type="text" v-model="email"/>
<datalist id="siteUerEmails">
<option v-for="email in siteEmails" v-bind:value="email.Email"></option>
</datalist>
</div>
<!– End email Field–>
<!– Start requestType Field–>
<div class="form-group ">
<label class="control-label " for="requestType">
Request Type
</label>
<select class="select form-control" id="requestType" name="requestType" v-on:change="showRequestType" v-model="requestType">
<option selected="selected" value="">
</option>
<option value="Laptop">
Laptop
</option>
<option value="Mobile">
Mobile
</option>
</select>
</div>
<!– End requestType Field–>
<!– Start description Field–>
<div class="form-group ">
<label class="control-label " for="textarea">
Description
</label>
<textarea class="form-control" cols="40" id="textarea" name="textarea" rows="10" v-model="description"></textarea>
</div>
<!– End description Field–>
<!– BEGIN TEMPLATE –>
<!– BEGIN MOBILE SECTION –>
<template v-if="boolMobile">
<!– Start mobilePhone Field–>
<div class="form-group ">
<label class="control-label " for="mobilePhone">
Mobile #:
</label>
<input class="form-control" id="mobilePhone" name="mobilePhone" type="text" v-model="mobileNum" />
</div>
<!– End mobilePhone Field–>
<!– Start phoneBrand Field–>
<div class="form-group ">
<label class="control-label " for="select1">
Phone brand
</label>
<select class="select form-control" id="select1" name="select1" v-model="phoneBrand">
<option selected="selected" value="">
</option>
<option value="Apple">
Apple
</option>
<option value="Google">
Google
</option>
<option value="Nokia">
Nokia
</option>
<option value="LG">
LG
</option>
<option value="Samsung">
Samsung
</option>
</select>
</div>
<!– End phoneBrand Field–>
<!– Start Mobile Operating System Field–>
<div class="form-group ">
<label class="control-label ">
Mobile Operating System
</label>
<div class="">
<div class="radio">
<label class="radio">
<input name="radio" type="radio" value="Android" v-model="mobileOS" v-on:click="showHideMobileModel"/>
Android
</label>
</div>
<div class="radio">
<label class="radio">
<input name="radio" type="radio" value="iPhone" v-model="mobileOS" v-on:click="showHideMobileModel"/>
iPhone
</label>
</div>
</div>
</div>
<!– End Mobile Operating System Field–>
<!– BEGIN ANDROID Model –>
<div class="form-group" v-if="boolAndroidModel">
<label class="control-label " for="androidModels">
Android Models
</label>
<select class="select form-control" id="androidmodels" name="androidmodels" v-model="androidmodels">
<option selected="selected" value="">
</option>
<option value="Google Pixel 3">
Google Pixel 3
</option>
<option value="Samsung Galaxy">
Samsung Galaxy
</option>
</select>
</div>
<!– END ANDROID Model –>
<!– BEGIN iPHONE Model –>
<div class="form-group " v-if="booliPhoneModel">
<label class="control-label " for="select4">
iPhone Models
</label>
<select class="select form-control" id="select4" name="select4" v-model="iphonemodels">
<option selected="selected" value="">
</option>
<option value="iPhone 7">
iPhone 7
</option>
<option value="iPhone 6">
iPhone 6
</option>
</select>
<!– END iPHONE Model –>
</div>
</template>
<!– END MOBILE SECTION –>
<!– END TEMPLATE –>
<!– BEGIN TEMPLATE –>
<!– BEGIN LAPTOP SECTION –>
<template v-if="boolLaptop">
<div class="form-group ">
<label class="control-label " for="laptopBrand">
Laptop Brands
</label>
<select class="select form-control" id="laptopBrand" v-model="laptopBrands">{{laptopBrands}}
<option selected="selected" value="">
</option>
<option value="Lenovo">
Lenovo
</option>
<option value="HP">
HP
</option>
<option value="Microsoft">
Microsoft
</option>
<option value="Dell">
Dell
</option>
</select>
</div>
<div class="form-group ">
<label class="control-label ">
Laptop OS
</label>
<div class="">
<div class="radio">
<label class="radio">
<input name="LaptopOS" type="radio" value="Windows 7" v-model="laptopOS" />{{laptopOS}}
Windows 7
</label>
</div>
<div class="radio">
<label class="radio">
<input name="LaptopOS" type="radio" value="Linux" v-model="laptopOS" />
Linux
</label>
</div>
</div>
</div>
<div class="form-group " v-if="boolLaptopSerial">
<label class="control-label " for="text3">
Laptop Serial #
</label>
<input class="form-control" id="text3" name="text3" type="text"/>
</div>
</template>
<!– END LAPTOP SECTION –>
<!– END TEMPLATE –>
<div class="form-group">
<div>
<button class="btn btn-primary btn-sm" name="submit" type="button" v-on:click="submitForm">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdesk/helpdesk.js"></script>
view raw helpdesk.html hosted with ❤ by GitHub
new Vue({
el:'#app',
data: {
//test:'Good luck!',
errors: [],
name:null, description:null, email:null,
officePhone:'', location:'',
requestType:'',
mobileNum:'',
phoneBrand:'',
mobileOS:'',
androidmodels:'',
iPhonemodels:'',
laptopBrands:'',
laptopOS:'',
laptopSerial:'',
siteEmails: [],
laptops:'',
boolLaptopSerial:false,
boolAndroidModel: false,
booliPhoneModel: false,
boolMobile:false,
boolLaptop:false
},
created: function(){
this.getSiteUsers();
},
methods: {
showRequestType: function(e) {/* Access event object */
if (e.target.value == 'Laptop'){
this.boolLaptop = true;
} else {
this.boolLaptop = false;
}
if (e.target.value == 'Mobile'){
this.boolMobile = true;
} else {
this.boolMobile = false;
}
},
showHideMobileModel: function(e){
if (e.target.value == "iPhone"){
this.booliPhoneModel = true;
this.boolAndroidModel = false;
}else{
this.boolAndroidModel = true;
this.booliPhoneModel = false;
}
},
getSiteUsers: function(){
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/siteusers?$select=Email";
var headers = {
"accept": "application/json;odata=verbose"
};
var vm = this;
$.ajax({
url: fullUrl,
type: "GET",
headers: headers,
success: function success(data) {
console.log(data);
vm.siteEmails = data.d.results;
}
});
},
submitForm: function(){
if (this.validateForm()){
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/lists/GetByTitle('helpdesk')/items";
$.ajax({
url: fullUrl,
method: "POST",
data: JSON.stringify({
'__metadata': { 'type': 'SP.Data.HelpdeskListItem' },
'Title': this.name,
'OfficePhone': this.officePhone || 'NA',
'Location': this.location,
'Email': this.email,
'RequestType': this.requestType,
'Description': this.description,
'laptopBrands': this.laptopBrands,
'laptopos': this.laptopOS,
'MobileNumber': this.mobileNum,
'phonebrand': this.phoneBrand,
'mobileos': this.mobileOS,
'iphonemodels': this.iphonemodels,
'androidmodels': this.androidmodels
}),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data){
alert("Submit was a success!");
},
error: function(data){
console.log(data);
}
});
}
},
validateForm: function() {
this.errors = [];
if (!this.name){
this.errors.push("Name required.");
}
if (!this.description){
this.errors.push('Description required.')
}
if (!this.email){
this.errors.push('Email required.')
}else if(!this.validEmail(this.email)){
this.errors.push('Valid email required.');
}
if (!this.errors.length){
return true;
}
console.log(this.errors);
},
validEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}
})
view raw helpdesk.js hosted with ❤ by GitHub

Categories
SharePoint

Using Visual Studio Code as your SharePoint editing tool

I don’t know about you, but editing my code SharePoint code files in SharePoint online is a pain. All those tabs opening become an annoyance after awhile. That pain point led me to figure out how to use Visual Studio Code to edit my SharePoint code files with no issues. It has to do with syncing to OneDrive

I show you how in this video:

Enjoy!!