Steps: 

1. Download and Install SharePoint Online Management Shell 
   • Visit the Microsoft download page for SharePoint Online Management Shell.
     
2. Create a custom theme using the Theme Generator Tool
   • Navigate to this URL to generate your new theme 
   • You can use the Colour section to choose your custom Colours that match your brand. You will get to see the sample page render in real-time, showing you what the page will look like with new Colours.
   • Next, click Export theme in the upper-right-hand-corner. On the next screen, choose PowerShell tab, then copy all of the text into a Notepad.

     

3. Start SharePoint Online Management Shell: 
   • After installation, click on the SharePoint Online Management Shell to open it.

     

4. Connect to SharePoint Online: 
   • Paste the following command in the promptConnect-SPOService -Url https://domain-admin.sharepoint.com
     (where domain is your SharePoint domain name)
   • Press Enter and provide your SharePoint admin credentials when prompted

     

5. Paste the Theme Script: 
   • At the command prompt, type in $themepalette = then paste the code you exported. It should look like the image below. Press Enter.
   • Next, type the following command:
     Add-SPOTheme -Identity “Name of your theme” -Palette $themepalette -IsInverted $false

     **Where Name of your theme is a theme name you want to give/assign to the theme. **

     

   • We can now change to this new theme in SharePoint.
6. Verify Installation: 
   • The custom theme is now installed in your SharePoint Online tenant.
   • Navigate to any SharePoint site and access the theming options:
     • Click the gear icon (⚙️) in the top right corner. Select “Change the look.”

       

     • You should see the custom theme listed there. (From your organization section)

       

   • This process only installs the theme. You will need to manually apply it to individual sites.

What is Co-Authoring in SharePoint Online? 

Co-authoring in SharePoint Online enables multiple users to simultaneously edit and collaborate on documents in real-time. This feature is activated by default in SharePoint Online document libraries. When several users work on a document (like Word, Excel, or PowerPoint) at the same time, everyone’s changes are immediately visible to all participants. Essentially, co-authoring allows multiple people to work on a document concurrently.  

In this blog, we have included valuable tips outlining the essential dos, don’ts, and advanced strategies for effective co-authoring in SharePoint. 

Do’s 

1. Use Modern Browsers: Always use the latest version of modern browsers like Microsoft Edge, Google Chrome, or Firefox for the best co-authoring experience.
2. Enable Autosave: Keep autosave enabled to ensure that all changes are saved in real-time. 
3. Keep laptop online: Ensure your laptop has a stable internet connection to avoid losing changes and to keep the document updated in real-time. 
4. Start from scratch: new document, new template: Begin with a new document and template to avoid any formatting issues from copied content. 
5. Save Regularly: Although SharePoint Online automatically saves your work, it’s a good practice to save your changes frequently. 
6. Check Permissions: Make sure that all users who need to co-author have the appropriate permissions to edit the document. 
7. Enable Version History: Ensure version history is enabled in your document library to track changes and revert to previous versions if needed. 

    

8. Use Comments: Utilize the comments feature to communicate with your co-authors directly within the document. 
9. Avoid Opening the Same Document in Multiple Browser Tabs or Applications: Opening the same document in multiple tabs or different applications can cause conflicts and versioning issues. Work on the document in a single instance to prevent such problems. After finishing your work, remember to close the document to free up resources and reduce the risk of conflicts

Don’ts 

1. Avoid Editing Offline: Refrain from editing documents offline if multiple users are working on the same document simultaneously, as this can cause version conflicts. 
2. Do not copy and paste directly: Refrain from editing documents offline if multiple users are working on the same document simultaneously, as this can cause version conflicts. 
3. Do not leave the document open when not editing it: Close the document when you are not actively editing to reduce the risk of conflicts. 
4. On large documents, do not have more than 5 co-authors: Limiting the number of co-authors on large documents helps prevent conflicts and improves performance. 
5. If possible, do not use track changes: Track changes can slow down the document and cause confusion. Use comments instead for feedback. 
6. Don’t Use Unsupported File Formats: Stick to supported file formats like Word, Excel, and PowerPoint for co-authoring. Avoid using formats that do not support co-authoring features. 
7. Avoid Large Files: Try not to co-author very large files, as this can slow down the process and lead to performance issues. 
8. Don’t Overwrite Others’ Work: Be mindful of other users’ changes and avoid overwriting their work. Use the document’s history to see who made which changes. 

Advanced Tips 

1. Implement Document Libraries: Organize documents within SharePoint libraries for better management and easier navigation. 
2. Communicate with Co-authors: Maintain clear communication with your co-authors to avoid conflicting changes and ensure everyone is on the same page. 
3. Assign Roles and Responsibilities: Clearly define roles and responsibilities for each co-author to streamline the collaboration process. 
4. Monitor Document Activity: Use SharePoint’s activity monitoring features to keep track of who is editing the document and when. 
5. Use the “Check In” and “Check Out” Features: These features can help manage editing rights and reduce conflicts, especially on larger documents. 
6. Ensure Consistent Office Versions: Ensure all co-authors are using the same or compatible versions of Microsoft Office to avoid compatibility issues. 
7. Maintain Consistent Naming Conventions: Establish and follow consistent naming conventions for documents to improve organization and retrieval. 

Conclusion  

In conclusion, the co-authoring feature in SharePoint Online is a powerful feature for teams who are working together on a project or document. With the ability to collaborate in real-time and access to a range of other collaboration and productivity features, SharePoint Online makes it easier for teams to work together and achieve their goals. Whether you are working in the office or remotely, SharePoint Online co-authoring can help you to be more productive and efficient. 

By following these tips, you can maximize the efficiency and effectiveness of collaborative work on SharePoint, ensuring a smoother and more productive co-authoring experience. 

SPFx developers must grasp the layout of SharePoint Framework. This means understanding the different types of files included and what each file does. 

This blog post will cover the various files that make up an SPFx solution. 

To give you a quick overview, SPFx is a fresh framework from Microsoft designed to enhance SharePoint and Teams capabilities. Using SPFx, you can employ any JavaScript framework such as React, Angular, or Handlebars to effortlessly craft visually appealing and responsive web parts. 

Screenshot of all files within the SPFX solution displayed below. 

 

Here are five fundamental folders and other files visible: 

1. .vscode 
2. config 
3. node_modules 
4. sharepoint/assets 
5. src 

Let’s analyse all the folders and files nested within this directory. 

1. .vscode 
   This folder typically contains settings and configurations for Visual Studio Code, such as launch configurations, task definitions, and other editor-specific settings.  This folder contains two files (1)launch.json (2)setting.json
   • launch.json:
     This file is used to configure debugging settings for Visual Studio Code. It defines how the debugger should launch and attach to processes when debugging your code. For SPFx projects, launch.json can be configured to launch and debug your web parts or extensions in SharePoint workbench or in a local workbench.
   • settings.json
     This file is used to configure settings for Visual Studio Code on a project-specific level. It allows you to customize various editor settings such as font size, tab size, auto-save behaviour, and more. You can also define workspace settings in this file, which are specific to the current project/workspace.

2. Config
   This folder may contain configuration files for the SharePoint Framework (SPFx) project, including build configurations, environment settings, and any custom configurations needed for the project.
   • Confin.json:

     
     This file contains configurations specific to the SharePoint Framework project, such as bundle configurations, asset locations, external dependencies, and other project-specific settings. It helps customize how the SPFx solution is built and deployed.
     
     Title: SPFx Configurations for Tableau Web Part

     • Schema and Version:
       – $schema: The URL to the JSON schema file defining the structure of this config file.    – version: The version of the config file. 
     • Bundles:
       – Description: Defines the bundles for your application customizer. – “react-analog-application-customizer”: Name of the bundle. – components: Array of components that belong to this bundle. – entrypoint: Entry point file for your application customizer. – manifest: Manifest file for your application customizer. 
     • Externals:
       – Description: Defines external dependencies for your project. Currently empty. 
     • Localized Resources:
       – Description: Defines the localization settings for your application customizer strings. – ReactAnalogApplicationCustomizerStrings: Identifier for the localized resources. – Points to the localization files for different locales.

   • Deploy-azure-storage.json:

     
     This configuration file is typically used in SharePoint Framework (SPFx) projects to automate the deployment process of assets to Azure Storage.
      
     Title: Configuration for Azure Storage Deployment 

     • Schema:
         – $schema: The URL to the JSON schema file defining the structure of this config file. It ensures the file adheres to a specific format.
     • Working Directory:
          – Description: Specifies the directory where the files to be deployed are located.    – workingDir: Path to the directory containing the assets to be deployed. 
     • Azure Storage Account Details:
          – Description: Defines the Azure Storage account details for deployment.    – account: Name of the Azure Storage account where files will be deployed.    – container: Name of the storage container within the specified storage account where files will be deployed. 
     •  Access Key:
         – Description: Defines the Azure Storage account details for deployment.    – account: Name of the Azure Storage account where files will be deployed.    – container: Name of the storage container within the specified storage account where files will be deployed. 
     •  Access Key:
       – Description: Specifies the access key required to authenticate and access the Azure Storage account. – accessKey: Access key associated with the Azure Storage account.Note: This configuration file is used for deploying assets to Azure Storage. It specifies the working directory containing the assets to be deployed, the Azure Storage account name, the container within the storage account, and the access key for authentication.
       
       
   • Package-solution.json:

     

     • Schema:
       – $schema: The URL to the JSON schema file defining the structure of this config file. It ensures the file adheres to a specific format.
       
     • Solution Details:
       – name: Name of the SharePoint Framework solution package.
       – id: Unique identifier for the solution package. – version: Version of the solution package. – includeClientSideAssets: Indicates whether to include client-side assets in the package. – skipFeatureDeployment: Indicates whether to skip feature deployment during package installation. – isDomainIsolated: Specifies whether the solution package is domain isolated. – developer: Information about the developer including name, website URL, privacy URL, terms of use URL, and MPN (Microsoft Partner Network) ID.
     • Metadata:
       – shortDescription: Short description of the solution.
       – longDescription: Long description of the solution.
       – screenshotPaths: Paths to screenshots illustrating the solution.
       – videoUrl: URL to a video demonstrating the solution.
       – categories: Categories to classify the solution.
     • Features:
       – title: Title of the feature provided by the solution.
       – description: Description of the feature.
       – id: Unique identifier for the feature.
       – version: Version of the feature.
       – assets: Assets associated with the feature, such as element manifests. 
     • Paths:
       – zippedPackage: Path to the zipped solution package (.sppkg file).

   • Sass.json:

     

     The sass.json file is used in SharePoint Framework (SPFx) projects to configure the Sass (Syntactically Awesome Style Sheets) preprocessor options. Sass is a CSS preprocessor that adds power and elegance to the basic CSS syntax. The sass.json file allows developers to define settings for compiling Sass files into CSS during the build process. Here’s what it typically contains.
     
     

     • includePaths:
       An array of paths where the Sass compiler should look for imported files. It’s useful for importing Sass files from node_modules or other directories.
       
     • precision:
       Defines the number of decimal places to which rounding will occur during calculations. This setting can prevent precision loss in certain calculations, especially when dealing with responsive design or transformations.
     • outputStyle:
       Specifies the output style for the compiled CSS.

   • Serve.json:

     
     This configuration file specifies the serve settings for SharePoint Framework projects. It defines the port, HTTPS usage, and different serve configurations for various scenarios. Each configuration includes details such as the SharePoint page URL to load and any custom actions to apply during serving for specific scenarios.
     
     

     • Schema:
       – $schema: The URL to the JSON schema file defining the structure of this config file. It ensures the file adheres to a specific format.
       
     • Port and HTTPS Configuration:
       – port: Specifies the port number on which the local development server will listen. 
        – https: Indicates whether HTTPS protocol should be used for serving the project locally. 
     • Serve Configurations:
       – Description: Defines different serve configurations for different scenarios or environments. 
       – default: Default serve configuration. – pageUrl: URL of the SharePoint page to load when serving the project. – customActions: Configuration for custom actions to be applied when serving the project. – location: Specifies the location of the custom action. – properties: Custom properties to be passed to the custom action. – reactAnalog: Serve configuration specific to a scenario named “reactAnalog”. Similar structure to the default configuration.

3. Node_modules:
   These are third-party libraries and packages that are used in SPFx projects for various purposes like building, testing, bundling, and serving the project. Examples include webpack, gulp, react, office-ui-fabric-react, etc.
   The node_modules folder can be quite large because it contains all the dependencies required for development. However, it’s essential for SPFx development as it provides the necessary tools and libraries to build and run SharePoint Framework projects.
   When you create a new SPFx project or clone an existing one, you typically don’t need to include the node_modules folder in version control systems like Git. Instead, you include a package.json file, which lists all the dependencies required for the project. Other developers can then run npm install to download and install the necessary dependencies based on the package.json file. This approach helps keep the project repository size manageable and ensures consistency across development environments.

4. Sharepoint\assets:
   In short, the Sharepoint\assets folder in SPFx solutions is used to store static assets such as images, fonts, CSS, and JavaScript files. These assets are automatically hosted by SharePoint when the solution is deployed, making them easily accessible for use in SPFx components like web parts or extensions. It helps organize assets, improves performance, and ensures they are scoped to the site collection where the solution is deployed.
   
   
5. Src:
   • Localization Folder (loc):
     Description: –This folder holds language localization files, such as “en-us.js” or “de-DE.js”, along with an interface file. These files allow developers to support multiple languages for web parts.
     Purpose: –Developers can define language-specific strings within these files, enabling web parts to adapt to different language preferences.
   • Web Part Manifest File (webpart.manifest.json):
     Description: –This folder holds language localization files, such as “en-us.js” or “de-DE.js”, along with an interface file. These files allow developers to support multiple languages for web parts. 
     Purpose: –Developers can define language-specific strings within these files, enabling web parts to adapt to different language preferences.
   • Web Part Styling File (webpart.module.scss):

     
     Description:-This file, written in SCSS (Sassy CSS), provides styling instructions for the web part.
     Purpose: –SCSS offers advanced features for styling, enhancing the visual presentation and consistency of the web part across different devices and screen sizes.

   • Web Part Entry Point (webpart.ts):

     
     Description: –the entry point file defines the primary functionality and configurations for the web part. It typically contains a web part class extending BaseClientSideWebPart.
     Purpose: – This file governs the core behaviour of the web part, including property pane configurations and interactions with SharePoint data.

   • Components Folder (if using React):
     Description: –This folder, specific to React framework usage, houses state and props interface files, along with a SCSS file. It also includes a crucial file named “webpart.tsx”.
     Purpose: –In React-based projects, this folder encapsulates the component-based structure, facilitating the creation and management of reusable UI elements. “webpart.tsx” serves as the main React component file, orchestrating the rendering and functionality of the web part.  

Other files in solution :

index.ts: Entry point for TypeScript modules, organizing and managing module dependencies. 

.eslintrc.js: Configurations for ESLint, ensuring code consistency and identifying errors. 

.gitignore: Specifies files to ignore in Git, keeping the repository clean and manageable. 

.npmignore: Specifies files to exclude in npm packages, reducing package size and improving installation speed. 

.yo-rc.json: Stores project scaffolding configurations for future reference and consistency. 

gulpfile.js: Contains tasks and configurations for Gulp, automating build processes and enhancing productivity. 

package.json: Metadata file for npm packages, defining dependencies, scripts, and project information. 

package-lock.json: Locks dependencies’ versions for reproducible builds, ensuring consistency. 

README.md: Documentation file, providing project information, setup instructions, and guidelines. 

tsconfig.json: TypeScript compiler options and configurations for the project, guiding compilation process. 

Customizing SharePoint online forms is typically done using SPFx or Power Apps. However, this blog will demonstrate an alternative approach using JSON to customize out-of-the-box SharePoint list forms. This method eliminates the need for SPFx or Power Apps, as simple JSON can be employed to tailor the header, footer, and body of the form.. 
 
Through the use of JSON, users can create distinct sections within the form body and implement validations to dynamically show or hide form fields based on the values of other fields. Notably, the advantage of employing JSON for customization is the inherent responsiveness of the forms. Unlike other methods, there is no additional effort required to make these forms responsive, allowing seamless utilization across both desktop and mobile platforms. 
 
In this blog on SharePoint Online, User will explore the customization and formatting of SharePoint Online list forms through the use of JSON formatting. And column validation in SharePoint online list. 

 

First, familiarize yourself with customizing JSON formatting. Customize the form header, form footer, and form body. Divide the body into different sections.

1. Customize the SharePoint Online List Form Header using JSON formatting.

 

In the Format window, you’ll encounter options such as Header, Body, and Footer. Ensure that you choose Header.

In the “Formatting code” option, apply or paste the JSON formatting code provided below. Alternatively, you can retrieve this code by clicking on “Learn more” within the JSON code section. 

{ 

    “elmType”: “div”, 

    “attributes”: { 

        “class”: “ms-borderColor-neutralTertiary” 

    }, 

    “style”: { 

        “width”: “100%”, 

        “margin-bottom”: “15px”, 

        “background-color”: “purple” 

    }, 

    “children”: [ 

        { 

            “elmType”: “div”, 

            “style”: { 

                “display”: “flex”, 

                “align-items”: “center” 

            }, 

            “children”: [ 

                { 

                    “elmType”: “div”, 

                    “style”: { 

                        “flex”: “none”, 

                        “padding”: “0px”, 

                        “padding-left”: “10px”, 

                        “height”: “40px”, 

                        “color”: “white” 

                    } 

                } 

            ] 

        }, 

        { 

            “elmType”: “div”, 

            “attributes”: { 

                “class”: “ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-xl ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover” 

            }, 

            “style”: { 

                “box-sizing”: “border-box”, 

                “width”: “100%”, 

                “text-align”: “center”, 

                “padding”: “21px 12px”, 

                “overflow”: “hidden”, 

                “color”: “white” 

            }, 

            “children”: [ 

                { 

                    “elmType”: “div”, 

                    “txtContent”: “Task Details” 

                } 

            ] 

        } 

    ] 

}
 

You can customize the header by adjusting parameters such as background color, text color, and adding icons. Additionally, you can retrieve dynamic values from the body using this JSON formatting. 

 2. Customize the SharePoint Online List Form Body using JSON formatting. 

Once the “Configure layout” option is chosen, select the “Body” option from the dropdown in the “Apply formatting to” section. 

In the “Formatting code” option, apply or paste the JSON formatting code provided below. Alternatively, you can retrieve this code by clicking on “Learn more” within the JSON code section. 

{ 

    “sections”: [ 

        { 

            //give a display name for the section 

            “displayname”: “✈️”, //Instead of icon, user have the option to use names of sections  . 

            “fields”: [ 

                //reference your fields here using their display name 

                “Airline”, 

                 “Estimated airfare” 

            ] 

        }, 

        { 

            //give a display name for the section 

            “displayname”: “🏡”, //Instead of icon, user have the option to use names of sections. 

            “fields”: [ 

                “Hotel”,
                “Estimated hotel cost”//reference your fields here using their display name 

            ] 

        } 

    ] 

} 

Change the given code to establish distinct sections within the form. Each section allows for the inclusion of an icon alongside its name, mirroring the example depicted below. Additionally, you have the flexibility to add any column to any field within a section. 

 

When attempting to edit the columns in the form, it is evident that the fields are presented in a section-wise manner, as demonstrated below: 

 

 

3. Customize the SharePoint Online List Form footer using JSON formatting. After choosing the “Configure layout” option, select the “Footer” option from the dropdown in the “Apply formatting to” section. 

In the “Formatting code” option, apply or paste the JSON formatting code provided below. Alternatively, you can retrieve this code by clicking on “Learn more” within the JSON code section. 

{ 

    “elmType”: “div”, 

    “style”: { 

        “height”: “24px”, 

        “width”: “100%”, 

        “color”: “#fff”, 

        “font-size”: “15px”, 

        “border-top”: “5px solid #eee”, 

        “background-color”: “Purple”, 

        “padding”: “10px” 

    }, 

    “children”: [ 

        { 

            “elmType”: “div”, 

            “style”: { 

                “width”: “100%”, 

                “padding-top”: “10px”, 

                “height”: “24px” 

            }, 

            “children”: [ 

                { 

                    “elmType”: “a”, 

                    “txtContent”: “=’Task Review for ‘ + [$Title]”, 

                    “attributes”: { 

                        “target”: “_blank”, 

                       “href”: “=’https://aka.ms/task?review=’ + [$Tasks]” 

                    }, 

                    “style”: { 

                        “color”: “white” 

                    } 

                } 

            ] 

        } 

    ] 

} 

In the screenshot below, you can observe that the JSON code for the Footer has been included. I have implemented a functionality where clicking on the specified text will navigate the user to the email administrator.

 

Show/Hide form field based on conditions: 

To meet the requirement of displaying the Manager field in the form only when the Priority is set to Critical, follow these steps: 

• Click the “New list” button to open the list form. 
• Choose “Edit columns” from the options available in the top-right corner of the New form. 
• Select column which you want to hide/show  and click on three dots and select “Edit Conditional Formula”. 

Following that, you will encounter the field where you can input your formula. As an example, here is the code for the “Estimated Airface” field: when a specific value is selected in the “Airline” column, the estimated airfare will be displayed; otherwise, it will be hidden. 

Please note that you can find and obtain a solution by clicking on the line highlighted in green, which reads, “Learn to use conditional formulas in a list form.“ 

How to do column validation in SharePoint: 

• Column validation serves to ensure that the data entered in a specific column is accurate and meets the defined criteria. 
• Use Cases/Formulas- 
  • In my SharePoint list, there is a column named “Travel Start Date,” and I aim to enforce a rule that this date must be greater than or equal to today’s date.: =TravelStartDate>TODAY(). 
    • –First, enter the Edit mode for that column and then click on “More options.” And click on “column validation”
      
      

 

• Subsequently, insert the formula in this section, and ensure to include a User message. If the conditions specified in the formula are not met, this message will be displayed to the user.

  
  

Inline column validation in SharePoint will not be effective for this situation since it doesn’t allow retrieving or comparing values from other columns. To address this limitation, it is necessary to utilize list-level validation settings, as illustrated in the image below. This approach enables the use of multiple formulas to compare values from different columns. 

 

In the image above, the user can specify a formula ensuring that the travel end date is greater than the travel start date. Additionally, the sum of Estimated Airfare and Estimated Hotel Cost must be greater than zero. It’s crucial to understand that Estimated Airfare and Estimated Hotel Cost are individual columns, and their respective formulas won’t work in column validation settings. To overcome this, these formulas must be written in the list setting validation. Moreover, when employing multiple formulas, it’s important to write user messages separately, as demonstrated in the image, as there isn’t a distinct method to display messages within the formula.