You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/PxWeb2/documentation/customization.md
+79-21Lines changed: 79 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,22 +24,28 @@ public
24
24
│ └── translation.json
25
25
└── theme
26
26
│ └── variables.css
27
-
└── icon
28
-
├── topicIconMap.json
29
-
├── topicIcons.json
30
-
└── topic
31
-
├── icon1.svg
32
-
├── icon2.svg
33
-
├── ...
34
-
└── small/
35
-
├── icon1.svg
36
-
├── icon2.svg
37
-
└── ...
27
+
├── icon
28
+
│ ├── topicIconMap.json
29
+
│ ├── topicIcons.json
30
+
│ └── topic
31
+
│ ├── icon1.svg
32
+
│ ├── icon2.svg
33
+
│ ├── ...
34
+
│ └── small/
35
+
│ ├── icon1.svg
36
+
│ ├── icon2.svg
37
+
│ └── ...
38
+
├── content
39
+
│ ├── en
40
+
│ │ └── content.json
41
+
│ └── sv
42
+
│ │ └── content.json
43
+
│ └── ...
38
44
```
39
45
40
46
### config.js
41
47
42
-
```javascript
48
+
```javascript
43
49
window.PxWeb2Config= {
44
50
language: {
45
51
supportedLanguages: [
@@ -49,15 +55,67 @@ window.PxWeb2Config = {
49
55
defaultLanguage:"en",
50
56
fallbackLanguage:"en",
51
57
},
52
-
apiUrl:"..."
58
+
apiUrl:"...",
53
59
};
54
60
```
55
61
62
+
### content.json
63
+
64
+
The `content.json` file defines customizable text and links that appear in **PxWeb’s user interface**
65
+
This file allows you to configure localized UI content: you can add or change the **breadcrumb navigation** on the start page, add a **detailsSection** after the ingress on the start page, or update the **footer** content for the application.
66
+
67
+
```sh
68
+
public/content
69
+
├── ar
70
+
│ └── content.json
71
+
├── en
72
+
│ └── content.json
73
+
├── no
74
+
│ └── content.json
75
+
└── sv
76
+
└── content.json
77
+
```
78
+
79
+
- Each language folder contains its own `content.json`.
80
+
- The active language determines which file is loaded at runtime.
81
+
- This makes it possible to have different breadcrumbs, footer links, or details text depending on the selected language.
82
+
83
+
**Structure overview:**
84
+
85
+
```json
86
+
{
87
+
"startPage": {
88
+
"breadCrumb": {
89
+
"enabled": false,
90
+
"items": []
91
+
},
92
+
"detailsSection": {
93
+
"enabled": true,
94
+
"detailHeader": "More about PxWeb",
95
+
"detailContent": []
96
+
}
97
+
},
98
+
"footer": {
99
+
"columns": []
100
+
}
101
+
}
102
+
```
103
+
104
+
-**startPage.breadCrumb**
105
+
Optional breadcrumb navigation on start page. Enabled with the `enabled` flag.
106
+
Each item contains a `label` and an `href`.
107
+
-**startPage.detailsSection** – Optional section below the page ingress. When `enabled` is `true`, the application renders the **`DetailsSection` component**. This section can contain multiple entries, and each entry may be either a `textBlock` (with `header` and `text`) or a `links` block (with `header` and a list of `items`).
108
+
109
+
-**footer**
110
+
One or more footer columns with `header` and list of `links`.
111
+
112
+
This setup allows administrators to adjust localized content (text and links) for each language without modifying the application code.
113
+
56
114
### translation.json
57
115
58
116
Create a new folder and `translation.json` file using english as a template.
59
117
60
-
```json
118
+
```json
61
119
{
62
120
"meta": {
63
121
"languageName": "English",
@@ -77,7 +135,7 @@ Create a new folder and `translation.json` file using english as a template.
77
135
78
136
The css file will let you adjust colors to match you site profile.
79
137
80
-
```css
138
+
```css
81
139
:root {
82
140
--px-border-radius-none: 0;
83
141
--px-border-radius-xxsmall: 0.5px;
@@ -94,8 +152,8 @@ The css file will let you adjust colors to match you site profile.
94
152
95
153
### topicIconMap.json
96
154
97
-
The startpage displays a list of tables using the `TableCard` component.
98
-
To associate an icon with the main topic a table belongs to, there must be a mapping between the **topic ID** and the corresponding **SVG filename**.
155
+
The startpage displays a list of tables using the `TableCard` component.
156
+
To associate an icon with the main topic a table belongs to, there must be a mapping between the **topic ID** and the corresponding **SVG filename**.
99
157
This mapping is defined in `/public/icon/topic/topicIconMap.json`
100
158
101
159
If you want to add new icons, they must be placed in both of the following folders:
@@ -113,7 +171,7 @@ When adding new icons to public/icons/topic/, you must also update topicIcons.js
113
171
114
172
## PxWebApi
115
173
116
-
```sh
174
+
```sh
117
175
PxWeb
118
176
├── appsettings.Development.json
119
177
├── appsettings.Release.json
@@ -128,7 +186,7 @@ configs. The [docker](docker.md) example runs i Development mode and use most
128
186
values from `appsettings.json`. There are currently only two places you need to
0 commit comments