feat: Add custom branding functionality with CSS and JSON configuration
- Introduced custom branding CSS styles in `custom-branding.css`. - Created example JSON configuration for custom branding in `custom-branding.example.json`. - Implemented branding configuration logic in `BrandingConfig.ts` to normalize and validate branding settings. - Developed CSS loader to manage loading and unloading of custom stylesheets in `BrandingCssLoader.ts`. - Added DOM rendering capabilities for branding elements in `BrandingDomRenderer.ts`. - Defined types and interfaces for branding elements and configurations in `BrandingTypes.ts`. - Included localization support for German in `de-de.js`. - Added unit tests for branding configuration, CSS loader, and DOM renderer. - Validated project structure and static assets with new validation scripts.
This commit is contained in:
Torsten Brendgen
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "custom-branding",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
@@ -3,22 +3,9 @@
|
||||
"solution": {
|
||||
"name": "custom-branding-client-side-solution",
|
||||
"id": "03a7c4de-e031-4b83-a683-5ca5c364166e",
|
||||
"version": "1.0.4.0",
|
||||
"version": "3.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false,
|
||||
"features": [
|
||||
{
|
||||
"title": "Custom Branding extension registration",
|
||||
"description": "Registers the Custom Branding Application Customizer in the host web.",
|
||||
"id": "2eb6deaa-a4a0-40c5-9f15-6bdaff36094f",
|
||||
"version": "1.0.4.0",
|
||||
"assets": {
|
||||
"elementManifests": [
|
||||
"elements.xml"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
"skipFeatureDeployment": true
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/custom-branding.sppkg"
|
||||
|
||||
@@ -9,161 +9,43 @@
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "white",
|
||||
"padding": "15px 20px",
|
||||
"text-align": "center",
|
||||
"font-family": "Segoe UI, sans-serif",
|
||||
"font-size": "14px"
|
||||
},
|
||||
"content": "Willkommen auf unserem SharePoint Portal!"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#d83b01",
|
||||
"color": "white",
|
||||
"padding": "15px",
|
||||
"text-align": "center",
|
||||
"font-weight": "bold"
|
||||
},
|
||||
"content": "⚠️ Achtung: Wartungsarbeiten am Wochenende"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"withLink": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "white",
|
||||
"padding": "12px 20px",
|
||||
"text-align": "center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "span",
|
||||
"content": "Wichtige Mitteilung: Systemwartung geplant. ",
|
||||
"styles": {
|
||||
"font-weight": "bold"
|
||||
}
|
||||
"schemaVersion": 2,
|
||||
"enabled": true,
|
||||
"debug": true,
|
||||
"allowedCssHosts": [],
|
||||
"cssfiles": [],
|
||||
"placeholdertop": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "section",
|
||||
"attributes": {
|
||||
"aria-label": "Portalhinweis"
|
||||
},
|
||||
{
|
||||
"type": "a",
|
||||
"content": "Mehr Informationen",
|
||||
"attributes": {
|
||||
"href": "/sites/it/SitePages/Wartung.aspx",
|
||||
"target": "_blank"
|
||||
"styles": {
|
||||
"background-color": "#0078d4",
|
||||
"color": "#ffffff",
|
||||
"padding": "12px 20px",
|
||||
"text-align": "center"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "strong",
|
||||
"content": "Willkommen im SharePoint-Portal"
|
||||
},
|
||||
"styles": {
|
||||
"color": "white",
|
||||
"text-decoration": "underline",
|
||||
"margin-left": "5px"
|
||||
{
|
||||
"type": "span",
|
||||
"content": " – aktuelle Informationen finden Sie im Intranet."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gradient": {
|
||||
"pageUrl": "http://clshp001/",
|
||||
"customActions": {
|
||||
"035ba968-6488-4d42-86b3-0470ffcc95b9": {
|
||||
"location": "ClientSideExtension.ApplicationCustomizer",
|
||||
"properties": {
|
||||
"elements": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
||||
"color": "white",
|
||||
"padding": "20px"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "div",
|
||||
"styles": {
|
||||
"display": "flex",
|
||||
"justify-content": "space-between",
|
||||
"align-items": "center",
|
||||
"max-width": "1200px",
|
||||
"margin": "0 auto"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "div",
|
||||
"children": [
|
||||
{
|
||||
"type": "p",
|
||||
"styles": {
|
||||
"margin": "0",
|
||||
"font-size": "18px",
|
||||
"font-weight": "bold"
|
||||
},
|
||||
"content": "Neue Funktionen verfügbar!"
|
||||
},
|
||||
{
|
||||
"type": "p",
|
||||
"styles": {
|
||||
"margin": "5px 0 0 0",
|
||||
"font-size": "14px"
|
||||
},
|
||||
"content": "Entdecken Sie die neuesten Updates"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"content": "Mehr erfahren",
|
||||
"attributes": {
|
||||
"onclick": "window.location.href='/sites/news/SitePages/Updates.aspx'"
|
||||
},
|
||||
"styles": {
|
||||
"background-color": "white",
|
||||
"color": "#667eea",
|
||||
"border": "none",
|
||||
"padding": "10px 20px",
|
||||
"border-radius": "5px",
|
||||
"cursor": "pointer",
|
||||
"font-weight": "bold"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"placeholderbottom": {
|
||||
"elements": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user