I got the request to create a nice FAQ in SharePoint Online. The user interface should not be a simple list but should be fancy or modern. Additionally, the content should be in two languages, English and German.

So, what would be a simple approach for the solution? The content itself would be a custom list in SharePoint Online, where we have a choice field for the languages. For the answers we use a Note field with FullHtml style.

To display the contents of the list, we use some html, CSS and JavaScript in a Content Editor Webpart. In the JavaScript we query the list by language and build up some html that is added using jQuery. Finally, the added html gets a click function injected to show or hide the answer.

The html and JavaScript will look like this:

To create the structure for our solution, we are using just some PowerShell (with the SharePoint PnP extensions):

The final solution will look like this for the end user:

The complete code for this sample could be found in GitHub:

https://github.com/OlafD/Simple-FAQ-in-SharePoint

Advertisements