How to Code with ChatGPT for SharePoint Sites

Are you a SharePoint Designer who’s unfamiliar with code but want to use it to improve your SharePoint sites? Or are you an expert SharePoint programmer who wants to take an easier route when writing code? Coding in SharePoint is easy with ChatGPT and the newest SharePoint Script Editor: ShortPoint Code Editor Web Part!
ChatGPT is already changing how we approach everyday tasks, including coding. Both expert programmers and beginners are discovering how useful it is for coding tasks. It saves them significant time, as long as they know how to ask the right questions. When combined with a SharePoint script editor, it becomes a very powerful tool for generating, testing, and implementing codes in SharePoint, making way for a faster and more efficient process. So, how to code with ChatGPT in SharePoint? Follow our quick tutorial or explore our comprehensive guide to master ChatGPT coding.

Quick How to Code with ChatGPT Walkthrough

Below is a quick run-through on how to code with ChatGPT in SharePoint:
‍

Prepare the ChatGPT prompt. Remember to start with action words and be very precise.
Choose your programming language and add it to the prompt you prepared in Step 1.
Go to ChatGPT and type in your prompt.
Go to the SharePoint page you want to use and add the ShortPoint Code Editor web part.
Edit the ShortPoint Code Editor and paste the generated code.
Customize the code according to your needs.
Publish your page.

Prerequisites

You must already have an account in ChatGPT. ChatGPT will prompt you to create one before you can ask any coding prompts.
You must already have the ShortPoint Code Editor web part installed on your SharePoint environment. To learn how to do this, check out How to Customize SharePoint Using HTML, CSS, JavaScript Code and look for Part 1: Installing ShortPoint Code Editor.

What is ChatGPT

ChatGPT is an artificial intelligence (AI) chatbot developed by OpenAI. It uses deep learning techniques to interpret and generate human-like text responses.
‍

While many people use ChatGPT for basic questions like "How to garden?" or "How to potty train your dog?", it's also a powerful tool for debugging and writing codes, especially since the introduction of ChatGPT code interpreter.

The ChatGPT code interpreter is a new feature that overcomes many of the limitations of earlier versions. Previously, users were restricted to text conversations and prompts with the ChatGPT chatbot. Now, you can upload and download files, create charts, and even run Python code—significantly expanding the range of tasks ChatGPT can perform.

Why Use ChatGPT to Write Code

Like any other tool, ChatGPT has its pros and cons when it comes to writing code. Some argue that it doesn’t have all the context needed for the project you’re building and may not consider the coding best practices you employ.

While this is true, you can always check, test, and debug any code that ChatGPT generates. Furthermore, the benefits often outweigh the drawbacks:

‍

Quick and Easy Code Generation:

Even expert developers regularly search Google for code snippets—a process that can be time-consuming given the vast number of resources to sift through. Why not use ChatGPT instead and get results in seconds? It's a simple way to save time and effort.
‍
‍
Increase Productivity:

Think of ChatGPT as your exclusive assistant that helps with complex coding tasks. It gives you the code you need at a faster rate, freeing your time and allowing you to focus on other higher-level tasks.
‍
‍
New Ways of Learning:

There are always new ways to accomplish things. ChatGPT often explains how a particular code snippet works. As you go through these, you might just discover new concepts and learn new languages, adding to your already growing skills.

What is ShortPoint Code Editor

The ShortPoint Code Editor works similar to the SharePoint Script Editor, making coding in SharePoint a breeze! Its powerful and user-friendly features let you enhance your SharePoint pages with custom codes. With this free tool, you can add HTML, CSS, and JavaScript codes to improve your pages' appearance, interactivity, and functionality.

When combined with ChatGPT, the ShortPoint Code Editor lets you test and customize generated code, creating an efficient process that benefits both coding experts and beginners. You can learn more about this new SharePoint script editor and its features in Adding SharePoint Custom Codes: Get Started With the ShortPoint Code Editor.

How to Code with ChatGPT and ShortPoint Code Editor

Now that you know what ChatGPT is and why you should use it to write code. Let’s show you how to use ChatGPT to write code using ShortPoint Code Editor web part:
‍

Step 1: Prepare the prompt
‍A ChatGPT prompt is the instruction you type to get responses from ChatGPT. Just like a regular conversation, a well-crafted prompt leads to a better response. Here are some guidelines to help you write effective ChatGPT prompts:
‍

Start with action words:
‍
Begin your prompt with clear action verbs like "Write" or "Generate." This helps ChatGPT immediately understand what you want it to do.

For example, since we want it to generate a code for us, we will start with the word “Generate…”

‍
Define the task:
‍
Now, you need to provide context to the task you want ChatGPT to accomplish. You must be very clear and specific. Think of it like you’re giving specific directions to someone who is lost and doesn’t have a map.

For example, we want to add a pastel-colored digital clock element with minutes, hours, and seconds to our SharePoint page. We can then write the prompt as:
“Generate a digital clock element. It should have a pastel color background and should show the hours, minutes, and seconds.”
‍
‍
Review and Refine:
‍
Review your prompt carefully. Add any missing details and specify both what you want to include and what to avoid. The more detailed your prompt, the more precise and relevant ChatGPT's response will be.

Let’s take our example earlier, aside from the pastel background, we also want it to be gradient in color, have rounded corners, and show AM and PM. Our prompt will then be:
"Generate a nice digital clock element. It should have a rounded gradient background with pastel colors. It should also show the hours, minutes, and seconds with PM or AM."

‍

Step 2: Choose a Programming Language
‍After preparing your initial prompt, select a programming language. ChatGPT can generate code in many languages, such as Python, Java, JavaScript, HTML, CSS, and many more. Simply specify your preferred language in the prompt. Let’s go back to our example again:

“Generate a nice digital clock element using pure HTML, JavaScript, and CSS, without any imports. It should have a rounded gradient background with pastel colors. It should also show the hours, minutes, and seconds with PM or AM.”
‍
‍

Step 3: Generate Code
‍It’s now time to add your prompt to ChatGPT. Simply copy the prompt you’ve created, paste it in the field provided, and click Enter:
‍

You can even edit the code directly in ChatGPT or preview how it looks:
‍

Since in ShortPoint Code Editor there are separate fields for HTML, CSS, and JavaScript codes, we can ask ChatGPT to separate the codes:

‍

Step 4: Add ShortPoint Code Editor to your SharePoint page
‍

Note:
‍
You must have ShortPoint Code Editor installed before you can insert it into your SharePoint page. For more details on installation, check out How to Customize SharePoint Using HTML, CSS, JavaScript Code and look for Part 1: Installing ShortPoint Code Editor.

Go to the SharePoint page you want to use to add the generated code and click Edit:
‍

Close the Toolbox:
‍

Look for where you want to insert the code and click the gray plus icon:
‍

Use the search bar to look for ShortPoint Code and select it:
‍

Step 5: Copy and Paste Code in ShortPoint Code Editor
‍
Copy and paste each code section generated by ChatGPT into its corresponding field in ShortPoint Code Editor: HTML code into the HTML field, CSS into the CSS field, and JavaScript into the JavaScript field:
‍

Step 6: Test and Customize Code
‍

Tip:
‍
Always test the code before publishing to check if ChatGPT's generated code works as intended.

The ShortPoint Code Editor allows you to test, edit the code, and instantly preview the changes on your SharePoint page.

For example, we want to change the background color, font color, and the size of the digital clock. To do this, we will need to customize the CSS code. Simply click the Custom CSS field, make your changes, and Save:
‍

customize generated code in ShortPoint Code Editor

Step 7: Publish
‍

Once you’re satisfied with your code, close the ShortPoint Code window:
‍

Then, Publish your SharePoint page:
‍

Here's the final result of what we've accomplished! As you can see, it's remarkably simple—all you need is ShortPoint Code Editor and ChatGPT to write custom codes that enhance your SharePoint pages.
‍

Ready to Try ShortPoint Code Editor?

Now that you know how to code with ChatGPT and ShortPoint Code Editor, coding in SharePoint has become much simpler, regardless of your coding experience. You can now make the most out of these tools to provide a better experience for your intranet users.

If you already have ShortPoint Code Editor on your SharePoint pages, you’re already half way there. But if you haven’t yet, no worries! All you have to do is download and install the code editor into your SharePoint environment. For a detailed guide on how you can do this, check out How to Install ShortPoint Code Editor in SharePoint.

And if you have any questions, our Support Team is happy to assist you. Simply submit a ticket or email us at support@shortpoint.com.