Self-Service User Template for lungenkrebstestende

The user guide is here to help you understand how the custom blocks and functionalities on your site work. For all generic self-service guidance, you can visit our documentation site.

___________________

Chapter 1 Hero block
Chapter 2 Card block
Chapter 3 Brightcove video
Chapter 4 Read more block 1.
Chapter 5 Read more block 2.
Chapter 6 Read more block 3.
Chapter 7 Image card block
Chapter 8 Carousel block
Chapter 9 Image block
Chapter 10 Reference block
Chapter 11 External pop-up block
Chapter 12 Global blocks
Chapter 13 Deployment steps

Hero block

  1. Hero block

The first section on the homepage should be the hero block. This is an auto generated block that is triggered if the first piece of content in the doc is a picture followed by a “Heading 1”. E.g.:

Editable components: Components in the block (highlighted in red) can be updated. All the text present on transparent card is editable. Along with this background image used for hero banner can also replace as per requirement. At the end of transparent block there we have button, on click on this button pdf will be downloaded on our system. Please find below SS for editable component reference.



The hero banner block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

Image present at background can be added directly in doc by using insert image option. For mobile and desktop, the same image can be used. Hence a single image is enough.

  • Image requirements:
    • Image format: PNG
    • Image size: 1280px by 579px
    • For desktops and mobile the same image is used.

We can edit logos; logos can be added by directly adding in doc file if images are other than SVG files. If images are in svg format, then svg image is added in below format in index.docs file. Format: {image_name}:

Along with this add respective SVG in icons folder which is present inside asset folder. Asset folder is present on root directory of SharePoint location.

For heading, title, description and button name text can be updated directly in index.docs file.

  • Heading requirements:
    • Heading style: Heading1
    • Character limit: 59
  • Title requirements:
    • Heading style: Heading2
    • Character limit: 25
  • Description requirements:
    • Heading style: normal
    • Character limit: 204
  • Button text can be updated directly from index.docs file. URL for button can updated by right clicking on the text button and selecting the edit link option from the list. After URL update click on save button to update new URL.

Please find below steps to update pdf.

1. Add new pdf inside asset folder. Asset folder is present inside root directory of SharePoint location. Then select pdf and with the help of extension try to preview PDF.

2. Copy URL for new PDF and replace it with existing URL for button.

3. Then by following the publishing steps. Publish pdf on prod URL.

Card block

  1. Card block

Description: As shown in the screenshot below, the card block is a customizable, compact section of the Lungenkrebs website. With this block the user can display short intro regarding different blocks on a website. This card block can be used to display Image, heading, description and button.

Editable components:

These components in the block (highlighted in red) can be updated. (Highlighted component can be editable for all 3 cards)

The card block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

  • Title requirements:
    • Character limit: 45
    • Title style: heading2
  • Description requirement:
    • Character limit: up to 100
    • Style: Normal text
  • Button requirements:
    • Character limit: up to 18
  • Image requirements:
    • Image format: 1st column having PNG image and 2nd and 3rd column having SVG image
    • Image dimensions: PNG image having dimension as 97px by 97px.
  • New cards can be added by adding a new row to the existing structure. But it is recommended to keep the card count as 3.
  • Don’t add any new columns to the existing structure.


we can edit the icon; and the icon can be uploaded in index.docs file using the insert image option. if images are other than SVG files. If images are in SVG format, then SVG image is added in below format in index.docs file. Format = :{image_name}:

Along with this add respective SVG in icons folder which is present inside asset folder. Asset folder is present on root directory of SharePoint location.

For heading, description and button name text can be updated directly in index.docs file.

Brightcove video

  1. Brightcove video

Description: This block is used to render videos on websites. Please find below reference screenshot.

Editable component: Components in the block (highlighted in red) can be updated. Heading and video are editable components in this Brightcove video component.

The Brightcove video block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

In Brightcove video block we can edit title for video along with this we can edit video URL as well by updating changes directly in index.docs file.

  • Title requirements:
    • Title style: Heading1
    • Character limit: 72
  • Only 1 video can be added in single block, to add another video the same block can be added again with new video details.

To know more about upload and manage video, images for desktop and mobile, please refer below doc:
https://docs.platforms.pfizer/selfservice/docs/video-manager/using-video-manager/

Read more block 1.

  1. Read more block 1.:


 

Editable component: Components in the block (highlighted in red) can be updated. In this read more component we can edit logo, title/heading for block, description and text of button. Please find below a screenshot for reference.

The read more block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

In this read more block, in 1st row we have icon, title and description, icon can be directly added in doc file by using insert image option. Similarly, the title and description can be updated directly from index.docs file. Content which we need to hide can be inserted inside 2nd row and button text can be updated in 3rd row. On click of button content present inside 2nd row will be shown to user.

  • Title requirements:
    • Character limit: 52
    • Title style: heading2
  • Text requirement:
    • Character limit: no limit as such but for static content all content should be in single paragraph and for hidden content all content should be adjusted within 2 paragraphs.
    • Text style: Normal text
  • Image format: PNG
  • Image size: 781px by 781px and icon can be uploaded in index.docs file using insert image option.
  • Button requirements:
    • Character limit: up to 32

When we click on the text button to display hidden content, hidden content will be displayed. Please refer to the screenshot below for reference.

Text present in hidden content block can be updated in 2nd row of read-more block in SharePoint.

Back button text can be edited from placeholder file which is present in root directory of SharePoint location. Please find below a screenshot for reference.

Read more block 2.

  1. Read more block 2.

Editable component: Components in the block (highlighted in red) can be updated. In this read more component we can edit logo, title/heading for block, description and text of button. Please find below a screenshot for reference.

The read more block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

In this read more block, in 1st row we have logo, title and description, icon can be directly added in doc file by using insert image option. Similarly, the title and description can be updated directly from index.docs file. Content which we need to hide can be inserted inside 2nd row and button text can be updated in 3rd row. On click of button content present inside 2nd row will be shown to user.

  • Title requirements:
    • Character limit: 52
    • Title style: heading2
  • Subpoint title:
    • Character limit: no limit as such
    • Style: Bold
  • Subpoint description:
    • Character limit: no limit as such
    • Style: Normal text
  • Image format: PNG
  • Image size: 96px by 96px and icon can be uploaded in index.docs file using insert image option.
  • Description requirement:
    • Character limit: no limit as such can be added as required.
    • Style: Normal text
  • Button requirements:
    • Character limit: up to 32

When we click on the text button to display hidden content, hidden content will be displayed. Please refer to the screenshot below for reference.

Text present in hidden content block can be updated from 2nd row of read-more block in SharePoint.

Back button text can be edited from placeholder file which is present in root directory of SharePoint location. Please find below a screenshot for reference.

Read more block3.

  1. Read more block 3.

Description: This read more block is used to hide and show content on website. Please find below a screenshot for reference.

Editable component: Components in the block (highlighted in red) can be updated. In this read more component we can edit title/heading for block, description and text of button. Please find below a screenshot for reference.

The read more block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.


In this read more block, in 1st row we have title and description can be directly added in doc file. Similarly, the title and description can be updated directly from index.docs file. Content which we need to hide can be inserted inside 2nd row and button text can be updated in 3rd row. On click of button content present inside 2nd row will be shown to user. 

  • Title requirements:
    • Character limit: 52
    • Title style: heading2
  • Description requirement:
    • Character limit: no limit as such
    • Style: Normal text
  • Button requirements:
    • Character limit: up to 32

When we click on the text button to display hidden content, hidden content will be displayed. Please refer to the screenshot below for reference.

  • Subpoint title requirement:
    • Subpoint type: bold
    • Character limit: no limit as such
  • We can add any number of subpoint under the hidden section.
  • Subpoint description requirement:
    • Subpoint type: Normal text
    • Character limit: no limit as such

Text present in hidden content block can be updated from 2nd row of read-more block in SharePoint.

Back button text can be edited from placeholder file which is present in root directory of SharePoint location. Please find below a screenshot for reference.

Image card block

  1. Image card block

Description: This image card block consists of image, title and description text. Please find below a screenshot for reference.

Editable component: Editable component: Components in the block (highlighted in red) can be updated. In this image card block all components are editable. (Title, image and description text). This block is editable in index.docs file. Please find below a screenshot for reference.

The image card block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

In this block image can be directly added inside index.docs file, along with this title and description is editable directly inside index.docs.

  • Title requirements:
    • Character limit: 52
    • Title style: heading3
  • Image format: PNG
  • Image size: 975px by 521px (desktop) and 511px by 488px (mobile)
  • For image upload 1st add desktop image followed by mobile image by using insert image option.
  • Description requirement:
    • Character limit: 85
    • Style: Normal text
  1. Carousel block:

Description: This block consists of multiple images which can be viewed by clicking on the back and next button and text at bottom. Please find below a screenshot for reference.

Editable component: Components in the block (highlighted in red) can be updated. In this carousel component all images and text are editable. Please find below a screenshot for reference.

In this carousel heading, text, description and images can be directly updated in index.docs file.

The carousel block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

  • Image requirements:
    • Image format: PNG
    • Image can be directly added in block by using insert image option.
    • Image dimensions: For better alignment use below image dimensions:
    • 1st image left side: 141 px by 142px and 1st image right side: 279px by 151px
    • 2nd image left side: 279px by 151px and 2nd image right side: 149px by 151px
    • 3rd image left side: 149px by 151px and 3rd image right side: 279px by 151px
    • 4th image left side: 279px by 151px and 4th image right side: 258px by 141px
    • 5th image left side: 258px by 141px and 5th image right side: 263px by 96px
    • Image can be uploaded using insert image option in doc directly.
  • Title requirement:
    • Character limit: up to 50
    • Style: heading3
  • Description text requirement left side:
    • Character limit: up to 25
    • Style: Normal
  • Description text requirement right side:
    • Character limit: up to 150
    • Style: Normal
  • Description requirement:
    • Character limit: no limit
    • Style: Normal
  • In Carousel image block new rows cannot be added as it disturbs UI. Hence the count is limited to 5.

Image block

  1. Image block

Description: This image block consists of images and text which represent flow with the help of images. Please find below a screenshot for reference.

Editable component: Components in the block (highlighted in red) can be updated. In this image block text and images can be editable. Please find below a screenshot for reference.

In this image block heading images, bottom text and text can be edited directly from index.docs file under Image-group table.

  • Heading requirements:
    • Character limit: up to 70
    • Title style: heading3 and Bold
  • Image requirements:
    • Image format: SVG
    • Image count is restricted to 4. We cannot add more images in this block.
  • For mobile and desktop, the same images are used.
  • Image text requirement:
    • Character limit: up to 45 for 1st three image and for last image limit is up to 80
    • Style: Normal text
  • Text description requirement:
    • Character limit: No limit we can add as required.
    • Style: Italic text

The image group block is rendered from the index.docx file, which is located in the SharePoint root directory. Please refer to the attached screenshot.

Heading for this block can be directly edited in index.docs and images name are directly added in index.docs file.

images are in svg format, then svg image is added in below format in index.docs file. Format:

{image_name}:

Along with this add respective SVG in icons folder which is present inside asset folder. Asset folder is present on root directory of SharePoint location.

Reference block

  1. Reference block

Description: This block is present at the end of website. This block consists of images, text and URL’s. Please find below reference screenshot.

Editable components: Components in the block (highlighted in red) can be updated. In this reference block logo, title, text and URL can be edited. Please refer to the screenshot below for reference.

In this reference block heading, title, text and URL are edited from index.docs file under reference table.

  • Heading requirements:
    • Character limit: 52
    • Description style: heading1
  • Title requirements:
    • Character limit: up to 35
    • Title style: Bold
  • Icon format: SVG
  • Description URL requirement:
    • Character limit: no limit as such

If icons are in svg format, then svg image is added in the format below in index.docs file.

Format: {image_name}:

Along with this add respective SVG in icons folder which is present inside asset folder. Asset folder is present on root directory of SharePoint location.

The reference block is rendered from the index.docx file, which is located in the SharePoint root directory. Please find below a screenshot for reference.

In desktop mode to make changes for left side content please make heading, logo, text and URL changes in above table which is present in index.docs file.

Similarly for right side changes please make changes in the column below right link table.

To make changes in the above block please refer to the screenshot below of the table below for changes.

  • For Columns (column-link), Columns (column-link-right), Columns (reference) block:
    • We can add as many rows as possible to each block. There is not any limitation on the number of rows that can be added.
    • But we cannot add any new column to the existing structure in all 3 blocks.
  • For Columns (reference) block:
  • Title requirements:
      • Character limit: up to 35
      • Title style: Bold
  • Icon format: SVG
  • Description URL requirement:
      • Character limit: no limit as such
      • Description Style: Normal Italic text

External pop-up block

  1. External pop-up block

Description: This block displays when we are redirecting to an external site from our site. Please find below a screenshot for reference.

Editing component: Components in the block (highlighted in red) can be updated.  In this external pop-up block title, description and button text are editable. Please find below a screenshot for reference.

In this external-link-popup title, description and button text can be edited directly from external-link-popup.docs.

  • Title requirements:
    • Character limit: up to 45
    • Title style: heading1
  • Description requirements:
    • Character limit: no limit
    • Description style: normal text/Regular text
  • Button requirements:
    • Character limit: 12
    • Max button added in block: 2

The external-link-popup block is rendered from the external-link-popup.docx file, which is located inside popups folder which in present inside global folder. This global folder is present inside the SharePoint root directory. Please find below a screenshot for reference.

Global Blocks

  1. Footer:

Description: This block is present at the end of website. Please find below reference screenshot.

Editable component: Components in the block (highlighted in red) can be updated. In this footer block editable components are logo, column text and URL and copyright text. Please find below a reference URL.

The footer block is rendered from the footer.docx file, which is located inside the global folder. And the global folder is present inside SharePoint root directory. Please refer to the attached screenshot.

  • Image requirements:
    • Image dimensions: 1600px by 661px
    • Image format: PNG
  • Footer links requirement:
    • Character limit: up to 25
    • Style: normal
  • Copyright text requirements:
    • Character limit: up to 150
    • Style: normal
  • New footer links can be added as per requirement just make sure to have number of links in all 3 columns should be same
  • Total No of column count is restricted to 4 in footer.
  • Logo can be only added in the 1st column only.
  • Footer link can be changed by clicking on URL text and by selecting edit link option in doc file.

In the footer block, we can edit logo, logo can be added by directly adding in doc file. Text and URL for column can be also directly edited from footer doc file. Copyright line can be also updated from footer doc file.

  1. Navigation

Description: This navigation block is present at the start of the website. With the help of this block, the user can navigate to different sections of the website. This block consists of logos and navigation links. Please find below Screenshot for reference.

Editable component: Components in the block (highlighted in red) can be updated. In this navigation block editable components are 2 logos and navigation links. Please find below a screenshot for reference.

The navigation block is rendered from the nav.docx file, which is located inside the global folder. And the global folder is present inside SharePoint root directory. Please refer to the attached screenshot.

  • Image requirements:
    • Image format: SVG for Lungenkreb logo
    • Image format: PNG for Pfizer logo
    • Image dimensions for Pfizer logo: 2000px by 826px.
    • Lungenkreb logo should be placed at start and Pfizer logo at the end as shown in above SS.
  • Navigation links requirement:
    • Character limit: up to 50
    • Style: normal
  • Navigation link count is restricted to 3
  • We cannot add sub items to navigation link

In the navigation block, we can edit logo, logo can be added by directly adding in doc file if images are other than SVG files. If images are in svg format, then svg image is added in below format in index.docs file.    Format: {image_name}:

Along with this add respective SVG in icons folder which is present inside asset folder. Asset folder is present on root directory of SharePoint location.

Navigation text edited from nav doc file.

  1. 404 page:

Description: This 404-page block will be displayed when the user is redirected to the wrong page. Please find below a screenshot for reference.

Editable component: Components in the block (highlighted in red) can be updated. In this block heading, title and button text can be edited. Please find below a screenshot for reference.

The 404 block is rendered from the 404.docx file, which is located inside the global folder. And the global folder is present inside SharePoint root directory. Please refer to the attached screenshot.

  • Heading requirements:
    • Heading format: heading1
    • Character limit: up to 50
  • Description requirement:
    • Character limit: up to 100
    • Description format: heading2
  • We can add only 1 button which redirects the page to home page.

In these 404 blocks, heading, title and button text can be directly edited from 404.docs.

Deployment

  1. Deployment steps:

Description: All edited docs, new images, new PDF can be published with the help of the steps below. Please find below steps.

  1. Select updated file/image/pdf and click on sidekick extension and then click on preview button as shown in below screenshot.

  1. New Pop-up will come. Click on the ok button. Please find reference screenshot.

  1. Again, new pop-up will come. Now click on open URL. Please find below a screenshot for reference.

  1. Now in a new window URL will open. Copy endpoint of URL/ path of file, as shown in below reference screenshot.

Note: (To publish changes in docs file please follow below steps:)

  1. Now open index.docs file and Sign in the sidekick extension. Click on the preview button. Now the site will open in a new tab. Now click on the move to review button and then click on preview dropdown and click on review button. Now new URL will reload. Please find below the screenshot.

  1. Now click on prepare to review button, then new pop-up will come, please click on add page.

  1. Now provide live branch URL and add previously copied endpoint part at the end of live branch URL. Now click on add page ani then click on submit for review. Please find reference URL.

  2. Now the new page will reload then tick the checkbox and click on submit for review. After these changes will be published on main URL.