Configuration

Note:

The Home page should be configured using the "Healthcare 1 Setup" web part to ensure that the required lists and libraries are created automatically. Without this configuration, users will need to manually create dedicated lists or libraries for the respective web parts.

Configuration settings for each web part.

🧪1. Site config (Application customizer)

Steps to Test and Apply Template

On the SharePoint site, locate the new icon in the top suite bar (on the right side of the header bar). This icon opens the design template panel.
Click the icon to open the Page creation Panel.
In the panel:
- Select the "Home Page" template
- Click the Create Page button
Do not close or refresh the browser. A pop-up will appear to create the required lists and libraries:

Quick Links list
Document Content library
Knowledge Hub library
Events list
Training Video library (_Mock items are added automatically for QuickLinks, Document Content, Knowledge hub, News)

After the items are created, the site page will refresh automatically, and it will continue to creating page and adding webparts.
Once setup is complete, a button will appear to open the newly created homepage. Click it to view the result.

📋 Details

Personalized Greeting Web Part: Displays a dynamic welcome message with the logged-in user’s name along with the current date and time..
Announcements Display: Highlights important updates with preview text and a “Read More” option for detailed information.
Custom Background Support: Allows a professional background image to enhance the visual appearance of the banner.
Draggable Components:Enables repositioning of banner elements for flexible layout customization.
Integrated Quick Links Section: Provides quick access to frequently used resources with icon-based navigation tiles..

Welcome Banner

☰ Appearance Settings

This section allows customization of the Welcome Banner and Quick Links display. The following configurable options are available:

📸 View Property Pane Screenshots

Welcome Banner

👤 User Card Settings

🏷️ Name	🎯 Purpose	💡 Select Option
👋Welcome Text	Customizes the greeting text displayed before the user name.	`Welcome,`
👤User Name Format	Defines how the logged-in user’s name appears (e.g., First name)	`First Name`
🕒Date and Time Format	Controls the display format of the current date.	`Wednesday, Feb 19, 2026`
🧩Enable Draggable Components	Allows repositioning of banner elements within the layout.	`Enabled`
🔄Reset Component Positions	Restores banner layout to its default state.	`Button`
🖼️Select Background Image	Uploads or changes the banner background image.	`Healthcare_1.png`

ℹ️ Announcement Settings

🏷️ Name	🎯 Purpose	💡 Select Option
📢Announcement Title	Defines the heading displayed for the announcement section within the banner. This acts as the section label for the content below.	`Announcements`
📝Announcement Description	Allows entry of the main announcement content. This text is displayed as a preview message in the banner area. Supports multi-line content for detailed updates.	`Enter announcement text`
🔗Show Read More Link	When enabled, displays a clickable “Read More” link below the announcement preview to redirect users to additional details.	`Yes`
🌐Read More URL	Specifies the destination URL that opens when users click the “Read More” link.	`https://www.sharepointdesigns.com`

ℹ️ Appearance Settings

🏷️ Name	🎯 Purpose	💡 Select Option
📐Height of the Banner (in px)	Allows the user to adjust the overall height of the welcome banner using a slider control. This helps control how much vertical space the banner occupies on the page.	`500 px`

🔗 Quick Links Settings

🏷️ Name	🎯 Purpose	💡 Select Option
🗂️Select Data Source	Defines where the Quick Links data is collected from.	`Data Collect From Panel`
📏Border Radius (%)	Adjusts the rounded corners of Quick Link tiles.	`7`
📐Alignment	Aligns Quick Links horizontally within the section.	`center`
🌈Border Radius (%)	Adjusts the rounded corners of Quick Link tiles.	`Toggle`
📏Hide Gradient	Removes the gradient overlay from Quick Links.	`7`
✨Hide Animation	Disables hover animation effects on Quick Links.	`Toggle`
📏Icon Size	Controls the size of the Quick Link icons.	`Dropdown`
🎨Text Color	Allows customization of the Quick Link text color to match branding or theme preferences.	`Color Picker`
🖼️Show Only Icon or Image	When enabled, displays only the icon/image without link text.	`Off`
🧱Show Border	Adds or removes a border around Quick Link tiles.	`Off`
🔢No of Items Display	Defines the total number of Quick Link items displayed in the section.	`6`
🌫️Show Box Shadow	Enables or disables shadow effect around Quick Link tiles	`off`

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed bySharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

📰 3. Document Content

📋 Details

This web part offers support Document Content information,

Dynamic Document Display Web Part: Displays documents from a selected SharePoint document library in a structured card layout.
Search Functionality: Allows users to quickly search and filter documents within the web part. Category-Based Filtering: Supports filtering documents by category for better content organization. Header Customization: Includes configurable title, heading level, and optional “See All” link.

Assist

⚙️ Configuration Options

This section allows customization of the Document Library Web Part, including header configuration, content filtering, layout settings, and visibility options. The following configurable options are available:

📸 View Property Pane Screenshots

Assist

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Show Header	Enables or disables the header section of the web part.	Show
📝Title	Sets the display title of the document library section.	Documents
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field

⚙️ Content settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📚Source	Defines the document source location.	A document library on this site
📂Select a Library	Selects the document library to fetch documents from.	Healthcare Documents
📁Folder Name	Filters documents from a specific folder (supports nested path using /).	Folder Path
🏷️Category Name	Specifies the column used for category-based filtering.	Category
🔎Filter the Category Value	Filters documents by a selected category value.	Dropdown
🔢Number of Items to Display	Defines how many documents are displayed in the web part.	25

⚙️ Appearance settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
🧱Enable Borders	Adds or removes borders around document cards.	off
🎨Change Background Color	Enables custom background color for the web part container.	on
🎨Height of the Web Part (px)	Adjusts the vertical height of the web part container.	283

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed by SharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

📰 4. Knowledge Hub

📋 Details

Centralized Knowledge Display Web Part: Displays documents from a selected document library in a clean and structured layout.
Scrollable Content Area: Supports vertical scrolling when multiple documents are available.
Category-Based Filtering: Enables filtering documents using category columns and values.
Customizable Header Section: Allows control over title visibility and heading levels.
Theme Customization Support: Provides icon color customization for branding consistency.
Responsive & Visibility Control: Optimized for desktop, mobile, and email views.

Knowledge Hub

⚙️ Configuration Options

Details

The Web Part configuration is divided into two main sections:

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Show Webpart Title	Enables or disables the display of the Knowledge Hub title.	yes
📝Webpart Title	Sets the display title of the web part.	Knowledge hub
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field

⚙️General Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📚Source	Defines the document source location.	A document library on this site
📂Select a Library	Selects the document library to fetch documents from.	Healthcare Documents
📁Folder Name	Filters documents from a specific folder (supports nested path using /).	Folder Path
🏷️Category Name	Specifies the column used for category-based filtering.	Category
🔎Filter the Category Value	Filters documents by a selected category value.	Dropdown

⚙️ Appearance settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📚Layout Type*	Defines the visual layout style of the Knowledge Hub display.	Layout Option
📂Enable Borders	Allows to enable border.	off
📁Show See All	Allows to show or hide see All .	off
🏷️Show date	Allows to show or hide date .	on
🔎Height of the container	Adjust the height occurding to our requirement.	Slider

🎨 Theme settings

🏷️ Name	🎯 Purpose	💡 Select Option
🎨Color of the Icon	Allows customization of the document icon color for branding consistency.	Color Picker

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed bySharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

📰 5. News

Showcase concise company updates in a clean, minimal layout. Integrates with SharePoint news or RSS feeds.

News Preview

⚙️ Configuration

📸 View Property Pane Screenshots

News Pane 1

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Show Webpart Title	Enables or disables the display of the Knowledge Hub title.	yes
📝Webpart Title	Sets the display title of the web part.	Knowledge hub
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field
🌐Show Search Box	Display or hide the search boxes”.	false
🌐Show sort by	Display or hide the sort by options ”.	false

General Settings

🏷️ Name	🎯 Purpose	💡 Select Option
Search Sites	Select source sites	Current site
Enable RSS Feed	Enable RSS integration	On
RSS Links	Manage external feeds	[Manage Links]

Layout Settings

🏷️ Name	🎯 Purpose	💡 Select Option
Choose Layout	Select Layout	Filmstrip

Appearance Settings

🏷️ Name	🎯 Purpose	💡 Select Option
🎨Header Background Color	Allows the user to customize the background color of the banner header area. Includes a color picker, gradient selector, and manual input fields (Hex, RGB, Alpha) for precise color control and transparency adjustment.	#FFFFFF (Alpha: 100%)
🧱Section Background Color	Enables customization of the background color for the main content section below the header. Supports full color selection and opacity control to match branding requirements.	Custom color selection

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed bySharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

6. Organisation Chart

This web part will display a chart showing the organizational structure of the company based on the selected SharePoint site or list. It uses the Microsoft Graph API to query the user profiles and build the hierarchy.

Company directory

⚙️ Configuration

Header Settings

📸 View Header settings Screenshot

Header Settings

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Show Webpart Title	Enables or disables the display of the Knowledge Hub title.	yes
📝Webpart Title	Sets the display title of the web part.	Knowledge hub
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field
🌐Show Search Box	Display or hide the search boxes.	false
🌐Hide Category Filter	Display or hide the cataegory filter options boxes.	true

📌 Appearance Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Show Box shadow	Enables or disables the display the box shadow.	on
📝Height	Sets the height of the webpart .	320
🔠Node Color	Allows to choose node color.	Color picker
🔠Accent Color	Allows to choose Accent color.	Color picker

📌 Filter Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌Enable Category Filter	Allows you to choose whether the category filter have to show or hide .	on
📝Filter Field	We can able to filter it by fields .	Job Title

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed by SharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

7. Calendar

Show upcoming meetings, holidays, and key events in a clear monthly or weekly calendar format.

Calendar Preview

info

The Calendar web part pulls events directly from a SharePoint list, helping teams stay informed about important dates.

⚙️ Configuration

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌 Hide Title	Enables or disables the display of the Knowledge Hub title.	yes
📝Webpart Title	Sets the display title of the web part.	Knowledge hub
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field

⚙️ Content Settings

📸 View General Settings Screenshot

General Settings

🏷️ Name	🎯 Purpose	💡 Select Option
Select the Option Events	Allows to choose the list	Dropdown
Selects events list	Allows to choose event type	Dropdown
Add events	Add events from here	Event creator
Edit list	Allows to edut the existing events	Event creator
Show calendar	Allows to choose display or hide the calendar	Boolean
Filter Events	can filter events as per our choice	Dropdown
Button Action	we can able to add this in to Outlook or download as ICS file	Dropdown

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed bySharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

📰 8. Townhall Meeting video

📋 Details

Townhall Showcase Web Part: Displays important townhall meetings, recordings, or announcements in a structured and engaging format.
Content Type Selection: Allows selection of predefined content types such as Town Hall Recordings.
Custom Description Support: Enables adding a custom description for context or messaging.
Interactive Button Configuration: Supports customizable button icon and recording link integration.
Flexible Media Source: Allows selecting the content source type (e.g., Video).

Goals

⚙️ Configuration

📌 Header Settings Section

🏷️ Name	🎯 Purpose	💡 Select Option
📌 Show Header	Enables or disables the display of the Knowledge Hub title.	yes
📝Webpart Title	Sets the display title of the web part.	Knowledge hub
🔠Choose Title Heading Level	Defines the HTML heading level for the title (H1–H6).	Heading 3
🔗Show See All	Displays or hides the “See All” link in the header.	On
🌐Show See All Link	Specifies the URL that opens when users click “See All”.	URL Field

⚙️ Background Settings

🏷️ Name	🎯 Purpose	💡 Select Option
🧮Select Background Type	Defines the type of background used for the banner. Allows switching between image-based or other supported background styles.	`Image`
📁Select Background Image	Enables the user to upload or choose an image that will be displayed as the banner background.	`Select Image`
🌫️Hide Background Overlay	Controls the visibility of the overlay layer placed above the background image. When disabled, the overlay remains visible to improve text readability.	`Show`
📏Set Background Height (in pixels)	Adjusts the vertical height of the background area using a slider control, allowing precise layout customization.	`496 px`

⚙️ Recording Configuration

📸 View Property Pane Screenshots

Goals

🏷️ Name	🎯 Purpose	💡 Select Option
🎬Recording Title	Specifies the title of the recorded session or video. This title will be displayed as the main heading for the recording section.	`Enter recording title`
📅Enter Date	Defines the date associated with the recording (e.g., event date or upload date). This helps users identify when the session took place.	`24 sept`
🔗Recording Link (URL)	Provides the direct URL to the recording (e.g., YouTube, Stream, or internal video link). Users will be redirected to this link to view the recording.	`URL Field`
🎥Choose the Source	Defines the media source type for the townhall content.	`https://youtu.be/...`

ℹ️ About Section

🏷️ Name	🎯 Purpose
👨‍💻Developer Info	Indicates the web part is developed bySharePoint Designs.
📚Documentation Link	Provides access to user and admin documentation for further guidance.
🔑Activate License Button	A button to activate the premium or licensed version of the web part, if applicable.

Note:​

🧪1. Site config (Application customizer)​

Steps to Test and Apply Template​

📰 2. Welcome Banner​

📋 Details​

☰ Appearance Settings​

👤 User Card Settings​

ℹ️ Announcement Settings​

ℹ️ Appearance Settings​

🔗 Quick Links Settings​

ℹ️ About Section​

📰 3. Document Content​

📋 Details​

⚙️ Configuration Options​

📌 Header Settings Section​

⚙️ Content settings Section​

⚙️ Appearance settings Section​

ℹ️ About Section​

📰 4. Knowledge Hub​

📋 Details​

⚙️ Configuration Options​

📌 Header Settings Section​

⚙️General Settings Section​

⚙️ Appearance settings Section​

🎨 Theme settings​

ℹ️ About Section​

📰 5. News​

⚙️ Configuration​

📌 Header Settings Section​

General Settings​

Layout Settings​

Appearance Settings​

ℹ️ About Section​

6. Organisation Chart​

⚙️ Configuration​

Header Settings​

📌 Header Settings Section​

📌 Appearance Settings Section​

📌 Filter Settings Section​

ℹ️ About Section​

7. Calendar​

⚙️ Configuration​

📌 Header Settings Section​

ℹ️ About Section​

📰 8. Townhall Meeting video​

📋 Details​

⚙️ Configuration​

📌 Header Settings Section​

⚙️ Background Settings​

⚙️ Recording Configuration​

ℹ️ About Section​

Note:

🧪1. Site config (Application customizer)

Steps to Test and Apply Template

📰 2. Welcome Banner

📋 Details

☰ Appearance Settings

👤 User Card Settings

ℹ️ Announcement Settings

ℹ️ Appearance Settings

🔗 Quick Links Settings

ℹ️ About Section

📰 3. Document Content

📋 Details

⚙️ Configuration Options

📌 Header Settings Section

⚙️ Content settings Section

⚙️ Appearance settings Section

ℹ️ About Section

📰 4. Knowledge Hub

📋 Details

⚙️ Configuration Options

📌 Header Settings Section

⚙️General Settings Section

⚙️ Appearance settings Section

🎨 Theme settings

ℹ️ About Section

📰 5. News

⚙️ Configuration

📌 Header Settings Section

General Settings

Layout Settings

Appearance Settings

ℹ️ About Section

6. Organisation Chart

⚙️ Configuration

Header Settings

📌 Header Settings Section

📌 Appearance Settings Section

📌 Filter Settings Section

ℹ️ About Section

7. Calendar

⚙️ Configuration

📌 Header Settings Section

ℹ️ About Section

📰 8. Townhall Meeting video

📋 Details

⚙️ Configuration

📌 Header Settings Section

⚙️ Background Settings

⚙️ Recording Configuration

ℹ️ About Section