Tag: SharePoint

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

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