DEV Community: Mateusz Iwaniuk

Comparing New and Previous Column Value in SharePoint on Item Modification via Power Automate

Mateusz Iwaniuk — Mon, 06 Nov 2023 10:50:11 +0000

Context of problem:
I have a column in sharepoint list (f.e: Status) and when item is modified, I want to compare updated value (f.e "Accepted") with the previous one (f.e "Pending")

It took me few days to figure out the way which doesn't require complicated going-arounds, premium actions or hard stuff like parsing json

Final structure:

(later on Send an HTTP request to SharePoint will be renamed to HTTP and Filter array to FILTER)

As you can see - It took only 7 actions to solve this problem. Let's go!

What you should have at the beginning:

Sharepoint list with column that you want to track. In my case it is "Status"
At least one item

Step 1 - When an item or a file is modified

Intention: Triggering when specified column is modified (for example - Status has been changed)

Key	Value
Site Adress	Link to your sharepoint list
List or Library Name	Name of your sharepoint list
Folder name	leave blank

Step 2 - Send an HTTP request to SharePoint

IMPORTANT - Rename this action to "HTTP" (click three dots -> Rename) - Trust me, it will be useful later

Intention: Getting old states of this row

Key	Value
Site Adress	Link to your sharepoint list (the same as before)
Method	GET
Uri	/_api/web/lists/getByTitle('LIST NAME')/items(ID-OF-ITEM)/Versions?$filter=IsCurrentVersion eq false&$orderby=versionId desc&$top=1

Where:

LIST-NAME - Is string with the Name of your list
ID-OF-ITEM - In Power Automate select this fragment, select ID from "When an item or a file is modified" (first screen from this step)

(Optional - You don't have to read this if you are not interested what is beyond Uri stuff)

_api/web/lists/getByTitle('LIST NAME')- Catches collection of your list
/items(ID-OF-ITEM) - Catches all the old versions of updated item
?$filter=IsCurrentVersion eq false - Filtering: You don't want the current version (it is avaliable from the very first action)
&$orderby=versionId desc&$top=1 - Sorting: You want the most previous element and only one

Step 3- Initialize variable

Intention: Data that you received have very strange form (nested array of objects) and you have to find the one column that you are interested in

Key	Value
Name	foundObj
Type	Array
Value	[]

Step 4 - Filter Array

IMPORTANT - Rename this action to "FILTER" (click three dots -> Rename) - Trust me, it will be useful later

Intention: I mentioned that received data have very strange form. You have to filter it and access necessary fields.

Click the input, select "Expression" and write the following text:

Key	Value
Array to filter	body('HTTP')['d']['results']
Choose a value (left)	contains(item(),'Status')
Choose a value (right)	true

Final effect should look like this:

Note that this fragment works only when:

You renamed "Send an HTTP request to SharePoint" to "HTTP" (as i asked in step 2)
You want to refer to the "Status" column. If the one you track is different - rename it

So far, you should have 4 actions:

Step 5 - Set variable

Intention: Saving the data from filtering

After this step, you will have an array of one object. Job is almost done

Step 6 - Initialize Variable (to save oldStatus)

(when you add this action, Power Automate should automatically rename it to Initialize Variable 2)

Intention: Saving old status (the one before the update)

Key	Value
Name	oldStatus
Type	String
Value	body('FILTER')[0]['Status']

In order to apply this value, again, click the input and switch to "Expression"

Note that this fragment works oly when:

You renamed "Filter array" to "FILTER" (as I asked in step 4)
You want to refer to the "Status" column. If the one you track is different - rename it

Step 7 - Initialize variable (to save newStatus)

(when you add this action, Power Automate should automaticly rename it to Initialize Variable 3)

Intention - Saving new status (after the update)

In fact, it is only a formal step. You have to select interesting column and save it to the variable (so you eventually have two variables: oldStatus and newStatus)

All you have to do is select Status from "Send an HTTP request to SharePoint" action.

Note, that in my case Status was an option-choice, so I have to select Status Value, but it doesn't effect anything.

The final effect should look like this:

Conclusion

And that's it! You should have 2 variables: newStatus and oldStatus which contain wanted information. You can do with them whatever you want: Creating conditions, sending emails - Sky is the limit

It doesn't matter if the column will change in terms of Power Apps form or hand-change in sharepoint - This flow will work.

Please be aware of the fact, that in step 2 I fetched only last update). If you want to compare more old values - Switch &top=1 in Uri input to the number you actually want.

I also wanted to mention that my solution doesn't involve using premium actions and bases on elementary operations, so you shouldn't worry that future changes in Power Automate actions would affect integrity of this flow.

I built a chrome extension using Wikipedia API 🔥

Mateusz Iwaniuk — Sat, 12 Jun 2021 09:43:44 +0000

You can find code here: GitHub repo
Try it out: Live link

Intro

In this article, I am going to show you step by step, how I have built a full working chrome extension. My extension is called "Random Wikipedia Pages", which shows random Wikipedia articles and counts how many of them have already been shown or clicked by user. You can see the final result here.

Technological stack

I made the extension with the use of:

React
Styled Components
Sweet State
Fetching data

In order to enjoy my article, you should know at least basics of React. Being familiar with Styled Components and any State Management library is welcome, but not obligatory.
Of course, you should also understand how fetching data from external API works.

Getting started + Project plan
- Create React App
- Load your extension
- Explore the folder structure
Creating layout and components
Working with Wikipedia API and creating a store reducer
Building full extension from top to bottom
- Article
- Buttons
Conclusion

Step 1 - Getting started + Project plan

At first I'm going to explain more precisely how this extension actually works.
When opens the extension, an app fetches the random article and displays it.

User can read full article when he clicks a blue button - Then he is being redirected to full Wikipedia page but also he can draw the next article when he clicks a light button.

Every time user clicks any button, stats are getting updated.

At the bottom there is located a link to the article you currently read and to the GitHub repo.

Now let's start with coding!

1. Create react app

At first, create react app using the dedicated template to make chrome extensions.

npm init react-app my-first-extension --scripts-version react-browser-extension-scripts --template browser-extension

and then

cd my-first-extension

2. Load your extension

Before explaining the structure of project, let's load the extension in chrome.

Go to chrome://extensions
Click on the "Developer Mode" button, on the upper right
Click "Load unpacked" button and select dev folder from our project

Now, when turning on your extension, you should have the following view:

And...that's it! This is the way, how to create a very basic extension. Later on, we will just operate with Wikipedia API and store configuration (which is kinda harder), because the whole extension logic is almost done.

3. Explaining the folder structure

Let's go back to the code stuff.

If you are keen on React, the folder structure should be
known for you.

my-first-extension
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
    ├── img
    │   ├── icon-16.png
    │   ├── icon-48.png
    │   ├── icon-128.png
    ├── popup.html
    ├── options.html
    └── manifest.json
└── src
    ├── background
    │   ├── index.js
    ├── contentScripts
    │   ├── index.js
    ├── options
    │   ├── index.js
    │   ├── Options.js
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg

There are few folders that are actually not necessary and you can ignore them.
These folders are:

src/background - Responsible for working in the background and watch if user for example clicks any keyword shortcut. We don't need that in this project.
src/contentScripts - Responsible for managing a webpage (for example styles change) on which user currently is. We don't need that in this project.
src/options - Automatically generated page for user, when he can manage his options. Our app doesn't have that feature. So that, you can also ignore the public/options.html which is a template for that page.

However, you should get familiar with following files:

public/manifest.json - It is a primary file which describes your app. You put here information like title, description, version etc.
public/popup.html - A template for your extension. Taking advantage of the fact that we are here, let's import our basic font "Titilium Web" (weight 300 and 600) <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;600&display=swap" rel="stylesheet">

Additionally, I have added a .prettierrc file, which is responsible for formatting my code.

Step 2 - Creating layout and components

Now that you have created a project folder, it's time to prepare layout and components.

Layout

At first, let's make a layout folder.

In order to do that, I create theme.js file in that and add basic colors.

// src/layout/theme.js
export default {
  colorBlue: '#00A8FF',
  colorGrey: '#414141',
  colorWhite: '#fff',
}

Because of the fact that I want those color variables to be available in every section of the app, I must use ThemeProvider , which provides theme variables to every component.

// src/layout.layout.js
import React from 'react';
import { ThemeProvider } from "styled-components";
import theme from './theme'
const Theme = props => {
    return (<ThemeProvider theme={theme}>{props.children}</ThemeProvider>  );
}

── src
   ├── layout
        ├── layout.js
        ├── theme.js
   ├── wrap.js

At the end, I create a simple Wrapper, which wraps the entire content of every section.

// src/layout/wrap.js
import styled from 'styled-components'

const Wrap = styled.section`
  width: 280px;
  margin: auto;
  position: relative;
`
export default Wrap

Components

Some elements will certainly be used more than once, hence they should be stored in different files.
So let's do that for Button, Desc and Header.

── src
    ├── components
     ├── desc
     │   ├── desc.js
     ├── header
     │   ├── header.js
     ├── button
     │   ├── button.js

Step 3 - Working with Wikipedia API and creating a store reducer

Well, despite I don't find this project unusually hard, this is the most difficult part of it.
In this section I fetch data from Wikipedia API and I configure the state management store, which is responsible for making request to Wikipedia endpoint, saving received data to state and updating local statistics (so here goes the local storage stuff, which is especially uncomfortable when it comes to chrome browser).

Making a Wikipedia request

At first I will show you how to fetch data from Wikipedia API.
The goal of my request is to achieve some english random article. Only title and beginning field is necessary.

The request should look like this:

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=random&grnnamespace=0&prop=extracts|description&grnlimit=1&explaintext=

There I describe for what specific param stands for:

Request part	Value	Role
https://en.wikipedia.org/w/api.php	-	Api URL
format	json	Response format
action	query	The goal is to query some data (not to update f.e)
generator	random	Declaring, I need a random page
prop	extract	Field, I want to receive (extract stands for description)
explaintext	-	Returns extracts field in txt style (instead of html)
grnlimit	1	Quantity of pages
grnamespace	0	**

** - I won't lie. I'm not sure what this tagged param is supposed to be responsible for. Understanding Wikipedia API is very hard, documentation is barely user-friendly. I have just found this param on StackOverflow and so the request can work.

An example of response:


{
    "batchcomplete": "",
    "continue": {
        "grncontinue": "0.911401741762|0.911401757734|60118531|0",
        "continue": "grncontinue||"
    },
    "query": {
        "pages": {
            "38142141": {
                "pageid": 38142141,
                "ns": 14,
                "title": "Category:Parks on the National Register of Historic Places in Minnesota",
                "extract": "Parks on the National Register of Historic Places in the U.S. state of Minnesota."
            }
        }
    }
}

As you can see, everything works fine. We have all necessary fields.

Working with reducer

In order to manage state in my app I used React Sweet State. I decided to use this library due to its easiness. I managed to keep my whole reducer logic in one file, because there are only two actions necessary:

IncrementOpen (after clicking blue button)- Responsible for getting stats data from chrome about total clicked articles and updating them
FetchArticle (after clicking light button) - Responsible for fetching article, sending it to state, getting statistics data from storage (how many articles have been already fetched and how many clicked) and updating stats after every fetch

Reducer file is located in the "reducer" folder.


── src
    ├── reducer
     ├── store.js

At first, installing library via NPM is required.

npm i react-sweet-state

So, let's start! At the beginning, I import installed library and create initialState, which contains all basic fields
src/reducer/store.js

// src/reducer/store.js

import { createStore, createHook } from  'react-sweet-state'
const  initialState = {
  title:  '', //Stands for the tittle of article
  desc:  '', // Contains article text
  id:  '', // Id of article (useful when you want to make a link)
  isTooLong:  false, //Informs if fetched text was longer than 250 chars
}

Now it's time to create a store.

// src/reducer/store.js
const  Store = createStore({
  initialState, //our basic state
  actions:{ //here go the actions, that I described earlier
    fetchArticle : ()=> 
    // My fetchArticle code
  }
})

In order to make my notes more readable, my entire code below is located in the exact place, where the My fetchArticle code comment is placed.
At first I must create one more function, which destructs setState and getState function and at the very beginning I'm setting state as initial state (so that when fetching new article, state has no values and the loading effect is being shown then).

As mentioned, in this function I must get user stats, which are located in the chrome storage.
At first, I initial all the variables that are necessary:

const  keyShown = 'allTimeShown' // Key of total shown articles
const  keyOpen = 'allTimeOpened'//Key of tot clicked articles
let  counterAllTimeShown = 1 //Value of total shown articles
let  counterAllTimeOpen = 0 //Value of total clicked articles

let  isFound = false //Checking if chrome storage contains those keys (necessary if user runs this extansion first time)

Before we fall into working with Chrome storage, we must add global chrome object into our file.
It is very simple, you must only this simple line of code at the beginning of reducer.js

// src/store/reducer.js 

/*global chrome*/
import { createStore, createHook } from  'react-sweet-state'
.
.

Note, that in order to have an access to chrome storage, user must allow it. In order to do that, putting this line into our manfiest.json is necessary.

// public/manifest.json
{  
  "permissions": ["storage"],
}

Now we must get stats values from chrome storage. At first, I feel obliged to instruct you how it works. I have spent a lot of time in order to understand chrome storage logic.

Instinctively, if you fetch data asynchronously, usually you expect it to look like this:

//How it usually looks
const res = await library.getData()

And so, when working with chrome storage you would probably expect it to look this way:

// What you would expect
const res = await chrome.storage.sync.get([keyShown,keyOpen])

Unfortunately, chrome storage doesn't work so simple. The only way to receive your response is to pass a callback a function as an argument when getting data from chrome storage.

// This is the only correct way
chrome.storage.sync.get([keyShown, keyOpen], async  res  => {
//Here goes the rest of logic:( this is the only way to have access to the chrome response
}

Instead of splitting the rest of code of fetchArticle action into smaller pieces of code, I will show you the final efect now.

  chrome.storage.sync.get([keyShown, keyOpen], async res => {
          counterAllTimeOpen = res[keyOpen] || 0 //Checking if response contains my totalOpen key
          if (keyShown in res) { //If contains, get total shown value
            counterAllTimeShown = res[keyShown]
            isFound = true
          }

          if (isFound) //If contains, increment totalShownStats 
            chrome.storage.sync.set({ [keyShown]: counterAllTimeShown + 1 })
          else { //If not, set default
            chrome.storage.sync.set({ [keyShown]: 2 })
          }

          //Fetch data section
          const url =
            'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=random&grnnamespace=0&prop=extracts&grnlimit=1&explaintext='
          let resp = await fetch(url) //Fetching article
          resp = await resp.json() 

        //Getting title, extract and Id values from response
          const response = { ...resp }
          const id = Object.keys(response.query.pages)[0]
          const title = response.query.pages[id].title
          let desc = response.query.pages[id].extract

          let isTooLong = false //Some articles might be very very long - There is no enough place in that litle extension. So that, I set limit to 250. 
          if (desc.length >= 252) {
            desc = desc.substring(0, 250)
            isTooLong = true
          }

          //Final - setting state!
          setState({
            id,
            title,
            desc,
            isTooLong,
            [keyShown]: counterAllTimeShown,
            [keyOpen]: counterAllTimeOpen,
          })
        })

I know, there was a lot of stuff in this part. If you don't understand it - Go again through this part. If you want to see the final effect of this part of code- click here.

The whole fetchArticle action is described in these steps:

Setting State fields to falsify values
Initializing key and value variables
Getting data from chrome storage
Checking if stats values are not nullable
Saving incremented stat (allTimeShown) or the default value
Making a Wikipedia request
Getting necessary data from Wikipedia response
Checking if text isn't too long (250 chars max)
Updating state

If you went through this, you have already got the worst part behind you. Now it will be only easier.

The only thing left is to create an incrementOpen action but rust me - It very easy. It takes literally 4 lines of code.

 actions:{
    incrementOpen:
        () =>
        ({ setState, getState }) => {
          const key = 'allTimeOpened'
          const counter = getState()[key] + 1 || 0
          setState({ ...getState(), [key]: counter })
          chrome.storage.sync.set({ [key]: counter })
          }
     }

This action is invoked when user clicks a blue button. Then he is redirected to the full Wikipedia webpage and "allTimeOpened" stat is increased.

Step 4 - Building full extension from top to bottom

Now that all the components have been created and whole app logic has been done, it's time to put all the pieces together.
My folder structure from the partial folder looks like this:


── src
    ├── partials
         ├── banner
     │   ├── banner.js
     ├── article
     │   ├── article.js
     ├── buttons
     │   ├── buttons.js
     ├── stats
     │   ├── stats.js
     ├── footer
     │   ├── footer.js

Banner and Footer are totally stateless parts, so I won't describe their structure here, it's literally part of few components. Moreover, paradoxically, there is no big logic in Stats - they only show values comping from states.

Let's focus on the parts, which use actions coming from storage then.
In order to use use and manage my state properly, I import my state and treat it as a hook.

import { useCounter } from  '../../store/reducer'

In order to use a Skeleton loading when waiting for fetching data, I must install a react-loading-skeleton package

npm i react-loading-skeleton

Article.js

Now look at my article component. It is a place, where all the data coming from Wikipedia are being shown.

// src/partials/article/article.js 

const Article = props => {
  const [state, actions] = useCounter()

  useEffect(() => {
    actions.fetchArticle()
  }, [])

  return (
    <Layout>
      <Wrap as="article">
        <Header bold margin>
          {state.title || <Skeleton />}
        </Header>
        <StyledDesc>
          {state.desc ? (
            state.isTooLong ? (
              `${state.desc}...`
            ) : (
              state.desc
            )
          ) : (
            <Skeleton count={5} />
          )}
        </StyledDesc>
        {state.isTooLong && <Whiter />}
      </Wrap>
    </Layout>
  )
}

As you can see, if data isn't already fetched, the Skeleton will be shown instead of empty text.
Furthermore - If text is too long, then after the description come "..." sign in order to signalize, that text has been shorted.

Note, that I have used a <Whiter> component. Thanks to that, when text is too long, this component gives an effect of disappearance of text.

const Whiter = styled.div`
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.8) 93.23%
  );
  width: 100%;
  height: 65px;
  position: absolute;
  bottom: 0;
  left: 0;
`

Buttons.js

This partial is responsible for having two buttons and managing stats system.
Reminder: After clicking a blue button, user is redirected to full Wikipedia article (and total clicked stats is increased) and after clicking a light button a new article is fetched (and total shown is increased, though).

// src/partials/buttons/buttons.js

const Buttons = () => {
  const [state, actions] = useCounter()

  const linkClickHandler = () => {
    actions.incrementOpen()
    window.open(`http://en.wikipedia.org/?curid=${state.id}`, '_blank').focus()
  }

  return (
    <Layout>
      <StyledWrap>
        <Button full first active={!!state.title} onClick={linkClickHandler}>
          Read full on Wikipedia
        </Button>
        <Button
          active={!!state.title}
          disabled={!state.title}
          onClick={actions.fetchArticle}
        >
          Find another article
        </Button>
      </StyledWrap>
    </Layout>
  )
}

App.js

The only thing left is to import all partials and place it in the app component.

// src/App.js
function App() {
  return (
    <div className="App">
      <Wrap>
        <Banner />
        <Article />
        <Buttons />
        <Stats />
        <Footer />
      </Wrap>
    </div>
  )
}

Conclusion

And so it works. I firmly believe that I described in detail process of creating my Wikipedia extension.
It's breathtaking, that the entire logic could have been done with React only.

If you have any questions - Write comments and send messages to communicate with me;)

You can find final code here: GitHub repo
Try it out: Live link

Feel free to rate my extension or give a star to my repo!

Send e-mails directly from front-end with JavaScript 💥💥

Mateusz Iwaniuk — Thu, 23 Apr 2020 15:54:43 +0000

My code from project is available here: https://github.com/Iwaniukooo11/email-sender

Nowadays, when creating even basic websites, programmers are obliged to use modern features and technologies. Even such basic project as creating simple portfolio for your friend may involve some problems, like receiving data from contact form.
There are many ways to read those data. You can connect your form with the database (f.e Firebase), and then read incoming messages from it. Well, it is an option, but I assume that it might be troublesome for your not-tech client.

Why don‘t you do your job by sending email?

Yes, it‘s definitely the best option, which is the most user-friendly. Your clients are going to be much happier, when they will receive incoming messages without using the database. But here comes the issue – How to implement that? Well, you may think that you need to use kind of back-end language.

Not at all! You don‘t have to use any of backend languages like php or python. Furthermore, you don‘t need even node.js!

Everything you need is a simple EmailJS library

In this article I will show you how to:

configure emailjs account
send email with the use of JS

Note, that in my project I have used gulp and webpack, thanks to what I write code in src file and serve it from dist.

I will show you in 5 steps, how to build an email sender from scratch.

Step 1 – Create your form in HTML

The very first thing that is required is of course creating a HTML form. Note, that you don‘t have to put validate attributes like required or max, because later on, the preventDefault() function will be run on your submit event and it will cancel working those attributes.

The most important thing in your form is to put the name attribute for each of inputs. They will be necessary later.

My very simple form looks like that:

src/html/index.html

  <form class="form">
        <input name='name' type="text" placeholder="Your name..." class="form__input" />
        <input name='topic' type="text" placeholder="Topic..." class="form__input"  />
        <textarea name='message' type="text" placeholder="Your Message..." class="form__input"  ></textarea>

        <input type="submit" value="send" class="form__input form__input--button">
    </form>

Step 2 – Sign up to emailjs

To configure your emails, you have to sign up to emailjs service. Don‘t worry – working with this website is very user-friendly and you won‘t spend lot of time on it.

After login, you will be asked about your email service.It is placed in the personal email service zone. In my case, I have picked the gmail.

Then, you will have to connect your gmail account. It will be your email, which will be used to sending emails to you/your client. So for example, if you connect your xyz@gmail.com account, your future incoming emails will be sent from exactly this account. So don‘t worry about asking gmail for sending emails on your behalf – this is exactly what you need!

After connecting gmail account, click add service button.

Step 3 – Create your mail template

If you have connected your gmail account successfully, you should be now in your dashboard. And this is the time for creating your email template.

Go to the email templates card and click create a new template. The interface is very friendly, so you won‘t have any problems with creating it.
You can select name and ID of your template. I have called it ,,my-amazing-template".

You have to now specify, how incoming email should look like.
The values that will be used, are coming from name attribute in input. You have insert your variable into {{{ }}} signs.

Don‘t forget to place an email address in To email section (on the right side). It as an address, to which your emails will be sent. In this case - this is my business email.

This is my simple template which uses each of 3 variables, that come from my HTML form. I have also specified a subject of incoming email.

Step 4 – Save your API keys.

Well, there is nothing special in this part. Emailjs shares authorization API keys that will be used during sending email. Of course, the best place to put these keys is .env config. But because of the fact, that I am working with simple static files and I don‘t want to work with server configuration, I will save them in the apikeys file and later will import them.

Your USER_ID is located in the Account > API Keys.
And your TEMPLATE_ID is below the title of your template.

This is my example config based on not-existing keys
src/js/apikeys.js

export default {
    USER_ID :'user_DPUd-rest-of-my-id',
    TEMPLATE_ID:'my_amazing_template'
}

DO NOT FORGET TO ADD APIKEYS FILE TO .GITIGNORE WHEN DEPLOYING TO GITHUB

Step 5 – Send email!

It‘s time for the last and most important part of the project. Now we have to send email with the use of javascript.

At first, you have to download emailjs package.

npm i emails-com

After that, go to your js file and import your library and apikeys.

src/js/main.js

import emailjs from 'emailjs-com'
import apiKeys from './apikeys'

Now it‘s time to write a sending email function.
src/js/main.js

const sendEmail = e => {
    e.preventDefault()

    emailjs
    .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID)
    .then(
      result => {
        console.log(result.text)
      },
      error => {
        console.log(error.text)
      }
    )
}

It is so simple;
As you could see, sendForm function takes 4 parametres:

id of your email, which is located here:
TEMPLATE_ID coming from your apikey file,
event object from your form submitting
USER_ID coming from your apikey file,

And at the end, find the form and add the submit listener.
src/js/main.js

const form = document.querySelector('.form')
form.addEventListener('submit',sendEmail)

As i mentioned earlier, because of preventDefault() function, your attribute validation will not work. You have to do validation and clearing inputs on your own with the use of JS.

And that‘s all – let us test that.

I‘m filling up the form on my page and sending it.

I receive my email, which was passed during the template creating.

And indeed, all values coming from inputs are in the right place.

Conclusion

As could be seen, sending emails in JS is not so hard thing. With the emailjs you can send email messages in the easy way. I‘m sure that your future clients will be happy about incoming mails from forms located on their webpage.
I believe that I could help you. My code from this article is located here: https://github.com/Iwaniukooo11/email-sender

Localnetwork configuring, CDN libraries, global styles and much more in Svelte

Mateusz Iwaniuk — Mon, 23 Mar 2020 21:32:20 +0000

My live page from article: https://my-svelte-app.netlify.com/
My repo with code from article : https://github.com/Iwaniukooo11/my-svelte-project

JavaScript language is still growing. Nowadays, there are many different frameworks, which are commonly used in web development. One of them is Svelte – I call it ”a half-framework” because of its ease and flexibility. Programmers, who move to other frameworks are often confused and they need answer for common issues. People, who start their journey with svelte might be a little bit uncertain about basic subjects like f.e configuring local-network and adding libraries. In this article I’m going to show you how to:

configure your local network with svelte
add external JS libraries using CDN
add sass prepocessor and use it
declaring global scss styles and variables
deploy your app to Netlify

Configuring your local network

During your development time, regardless of state of your app progress,you want to have a view on your website. Basic local-host comes with npm run dev but there is one problem – you can’t see your project using mobile phone or any other device. Solving this issue is quite simple.

Open your package.json
Look at your ”scripts” section
Add --host 0.0.0.0 to the end of the dev and start line
Your package.json scripts should look like this:

 "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w --host 0.0.0.0",
    "start": "sirv public --host 0.0.0.0"
  },

Now typing either npm run dev and npm start command, your svelte app will be opened on local network and thanks to that, you will be able to see your project state on each device connected to your network (example: 182.165.1.10:5000).

Adding External CDN libraries

There is a moment, when you need to use any JS library (particlejs for simple example) but you don’t know how to do it. Your first think is to append it to your index.html which is located in public folder, but everything which is located in <body> tag is filled with your transpiled svelte code.
Solving this issue is also quiet simple – all you have to do is to change the place, which is filled by your svelte code.It may sound a little bit weird,but I’m going to explain it in 5 easy steps:

Open your index.html file (located in public folder)
Insert <div id="my-app"> into your <body> tag
Insert all external CDN links to the end of your </body> tag
Open your main.js file
Find and change the target value to document.getElementById('my-app') everything should look like that:

public/index.html

<body>
  <div id="my-app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</body>

src/main.js

import App from "./App.svelte";
const app = new App({
  target: document.getElementById("my-app")
});

Now you are able to add external CDN Libraries and use them.

Adding SCSS

Nowadays,using sass is very common. Most of web-developers can’t imagine doing any project without using sass – it’s absolutely understandable. You can implement sass into your svelte app in very easy way. All you have to do is to download npm package responsible for sass, configure it in rollup.config.js file and you can use it in your project.

npm install svelte-preprocess
In your rollup.config.js import autoProcess and implement this

import autoPreprocess from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: autoPreprocess()
    })
  }),
}

Now if you want to use scss in your project, you’ll just have to add type parameter in style tag.It should look like that:

<style type="text/scss">
h1{
 color:royalblue
}
</style>

tip:
You are not obligated to have your whole scss code in the one style tag. You can write it in the different files and import it.

src/components/tip/tip.svelte

<style type="text/scss">
  @import "./tip.scss";
</style>

<h1 class="tip">Red color comes from different scss file:)</h1>

src/components/tip/tip.scss

.tip {
    color: red;
}

Declaring global styles and variables

Now that you’ve installed and implemented sass preprocessor,it’s time to show you how does the scope in svelte work and how to use global styles and variables.

If you add any simple code,you will see,that these styles don't work for components in other files, which have even the same class structure. Let me show you this, using example files in unreal project.

src/components/first.svelte

<h1 class="header"> This header has got pink color </h1>

<style type="text/scss">
.header{
 color:pink;
}
</style>

src/components/second.svelte

<h1 class="header"> 
And this header is no color-styled,
 there are literally no styles in this file
</h1>

Working with that is kind of specific in svelte,but I will show you how it works.
The way to handle global styles is to put your styles into :global class.

Everything which is included in global class will affect every element on your webpage.

    :global(.header) {
        font-size:22px;
        text-transform:capitalize;
    }

Thanks to this line of code, each of elements on your webpage with .header class will have a specific font-size and text-transform, regardless of it's location in any file.

The best place to declare your global CSS variables and styles is in Svelte.App file.

The global variables work in very similar way. To make sure, that your variables are available in each of files in your projects, the best option is to have it in one, :global class.

src/App.svelte

:global(html){
 --color-grey: #AEAEAE;
}

src/components/third.svelte

<h2 class="grey"> 
I have a color, which comes from 
--color-grey variable
</h2>

<style type="text/scss">
.grey{
 color:var(--color-grey);
}
</style>

Deploying to netfliy

When you are ready to show your project to the world,it’s time to depoly it. The best and the easiest way to do it is netlify, but you can do it with literally every hosting that you want.

1) Connect your project with github
It's so simple - All you have to do is to create new repo and follow given instructions

2) Login to Netlify and click Create new site from git

3) Login with your GitHub account

4) If you don't see your repo to select, click this link on the bottom of the page

5) Find your repository and save it

6) Type npm run build in Build command input and public in Publish directory and then click deploy site

7) And it works! If you want, you can change your domain name in Domain settings > Custom domains > Options

And then change name

Everything should work fine.

Conclusion

Svelte is amazing framework and it works perfect with small projects. It may be hard to find yourself and to configure basic things, but I believe that I could help you.

My live page from article: https://my-svelte-app.netlify.com/
My repo with code from article : https://github.com/Iwaniukooo11/my-svelte-project

DEV Community: Mateusz Iwaniuk

Comparing New and Previous Column Value in SharePoint on Item Modification via Power Automate

Step 1 - When an item or a file is modified

Step 2 - Send an HTTP request to SharePoint

Step 3- Initialize variable

Step 4 - Filter Array

Step 5 - Set variable

Step 6 - Initialize Variable (to save oldStatus)

Step 7 - Initialize variable (to save newStatus)

Conclusion

I built a chrome extension using Wikipedia API 🔥

Intro

Technological stack

Table of contents

Step 1 - Getting started + Project plan

1. Create react app

2. Load your extension

3. Explaining the folder structure

Step 2 - Creating layout and components

Layout

Components

Step 3 - Working with Wikipedia API and creating a store reducer

Making a Wikipedia request

Working with reducer

Step 4 - Building full extension from top to bottom

Article.js

Buttons.js

App.js

Conclusion

Send e-mails directly from front-end with JavaScript 💥💥

Why don‘t you do your job by sending email?

Step 1 – Create your form in HTML

Step 2 – Sign up to emailjs

Step 3 – Create your mail template

Step 4 – Save your API keys.

Step 5 – Send email!

Conclusion

Localnetwork configuring, CDN libraries, global styles and much more in Svelte

Configuring your local network

Adding External CDN libraries

Adding SCSS

Declaring global styles and variables

Deploying to netfliy

Conclusion