Skip to content

Commit 8d1cfcc

Browse files
vmanVesaJuvonen
vman
authored and
VesaJuvonen
committed
App Customizer tutorial theme using sp-office-ui-fabric-core (SharePoint#2103)
* updated styling to use sp-office-ui-fabric-core * updated bullet numbering
1 parent 6a83a23 commit 8d1cfcc

File tree

1 file changed

+67
-54
lines changed

1 file changed

+67
-54
lines changed

‎docs/spfx/extensions/get-started/using-page-placeholder-with-extensions.md

Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -71,70 +71,83 @@ Notice that you're requesting a well-known placeholder by using the correspondin
7171
> These are the styles that are used in the HTML output for the header and footer placeholders.
7272

7373
```css
74-
.app {
75-
.top {
76-
height:60px;
77-
text-align:center;
78-
line-height:2.5;
79-
font-weight:bold;
80-
display: flex;
81-
align-items: center;
82-
justify-content: center;
83-
}
84-
85-
.bottom {
86-
height:40px;
87-
text-align:center;
88-
line-height:2.5;
89-
font-weight:bold;
90-
display: flex;
91-
align-items: center;
92-
justify-content: center;
93-
}
94-
}
74+
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
75+
76+
.app {
77+
.top {
78+
height:60px;
79+
text-align:center;
80+
line-height:2.5;
81+
font-weight:bold;
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
background-color: $ms-color-themePrimary;
86+
color: $ms-color-white;
87+
88+
}
89+
90+
.bottom {
91+
height:40px;
92+
text-align:center;
93+
line-height:2.5;
94+
font-weight:bold;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
background-color: $ms-color-themePrimary;
99+
color: $ms-color-white;
100+
}
101+
}
95102
```
103+
5. Install the `@microsoft/sp-office-ui-fabric-core` package to enable importing from SPFabricCore.scss
96104

97-
5. In the **HelloWorldApplicationCustomizer.ts** file, update the **IHelloWorldApplicationCustomizerProperties** interface to add specific properties for Header and Footer, as follows.
105+
```
106+
npm install @microsoft/sp-office-ui-fabric-core
107+
```
98108

99-
> [!NOTE]
100-
> If your Command Set uses the ClientSideComponentProperties JSON input, it is deserialized into the `BaseExtension.properties` object. You can define an interface to describe it.
101109

102-
```typescript
103-
export interface IHelloWorldApplicationCustomizerProperties {
104-
Top: string;
105-
Bottom: string;
106-
}
107-
```
110+
6. In the **HelloWorldApplicationCustomizer.ts** file, update the **IHelloWorldApplicationCustomizerProperties** interface to add specific properties for Header and Footer, as follows.
108111

109-
6. Add the following private variables inside the **HelloWorldApplicationCustomizer** class. In this scenario, these can just be local variables in an `onRender` method, but if you want to share them with other objects, define them as private variables.
112+
> [!NOTE]
113+
> If your Command Set uses the ClientSideComponentProperties JSON input, it is deserialized into the `BaseExtension.properties` object. You can define an interface to describe it.
110114
111-
```typescript
112-
export default class HelloWorldApplicationCustomizer
113-
extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {
115+
```typescript
116+
export interface IHelloWorldApplicationCustomizerProperties {
117+
Top: string;
118+
Bottom: string;
119+
}
120+
```
114121

115-
// These have been added
116-
private _topPlaceholder: PlaceholderContent | undefined;
117-
private _bottomPlaceholder: PlaceholderContent | undefined;
122+
7. Add the following private variables inside the **HelloWorldApplicationCustomizer** class. In this scenario, these can just be local variables in an `onRender` method, but if you want to share them with other objects, define them as private variables.
118123

119-
```
124+
```typescript
125+
export default class HelloWorldApplicationCustomizer
126+
extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {
120127

121-
7. Update the `onInit` method code as follows:
128+
// These have been added
129+
private _topPlaceholder: PlaceholderContent | undefined;
130+
private _bottomPlaceholder: PlaceholderContent | undefined;
131+
```
122132
123-
```typescript
124-
@override
125-
public onInit(): Promise<void> {
126-
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
127133
128-
// Added to handle possible changes on the existence of placeholders.
129-
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
134+
8. Update the `onInit` method code as follows:
130135
131-
// Call render method for generating the HTML elements.
132-
this._renderPlaceHolders();
133-
return Promise.resolve<void>();
134-
}
135-
```
136+
```typescript
137+
@override
138+
public onInit(): Promise<void> {
139+
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
140+
141+
// Added to handle possible changes on the existence of placeholders.
142+
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
143+
144+
// Call render method for generating the HTML elements.
145+
this._renderPlaceHolders();
146+
return Promise.resolve<void>();
147+
}
148+
```
136149
137-
8. Create a new `_renderPlaceHolders` private method with the following code:
150+
9. Create a new `_renderPlaceHolders` private method with the following code:
138151
139152
```typescript
140153
private _renderPlaceHolders(): void {
@@ -165,7 +178,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
165178
if (this._topPlaceholder.domElement) {
166179
this._topPlaceholder.domElement.innerHTML = `
167180
<div class="${styles.app}">
168-
<div class="ms-bgColor-themeDark ms-fontColor-white ${styles.top}">
181+
<div class="${styles.top}">
169182
<i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(topString)}
170183
</div>
171184
</div>`;
@@ -195,7 +208,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
195208
if (this._bottomPlaceholder.domElement) {
196209
this._bottomPlaceholder.domElement.innerHTML = `
197210
<div class="${styles.app}">
198-
<div class="ms-bgColor-themeDark ms-fontColor-white ${styles.bottom}">
211+
<div class="${styles.bottom}">
199212
<i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(bottomString)}
200213
</div>
201214
</div>`;
@@ -214,7 +227,7 @@ Notice that you're requesting a well-known placeholder by using the correspondin
214227
* Notice that the code path for both the top and bottom placeholders is almost identical. The only differences are the variables used and the style definitions.
215228
* It is possible to use the class names defined in the style sheet directly but it is not recommended. In case no style sheet reference defined in the ```styles``` variable is found in the code, the style sheet won't get added to the page. This is because unused references will get removed during bild process.
216229
217-
9. Add the following method after the `_renderPlaceHolders` method. In this case, you simply output a console message when the extension is removed from the page.
230+
10. Add the following method after the `_renderPlaceHolders` method. In this case, you simply output a console message when the extension is removed from the page.
218231
219232
```typescript
220233
private _onDispose(): void {

0 commit comments

Comments
 (0)