Interactive Components in Plone Classic with Svelte
Lightning Talk / Hands-On World Plone Day 2021, Katja Süss, Rohberg, www.rohberg.ch
The Video is part of the World Plone Day 2021 series.
You are reading the Hands-On to the training https://interactive-components-in-classic-plone.readthedocs.io
We will see the following example:
- search for experts via competence and name and filter by region
What you will learn:
- Set up a Plone Add-On with Plone customizations and JS code and everything else in one.
Create Plone Add-On with Svelte
There's a handy bob template that creates a Plone package with all essential elements for a Svelte app integrated in Plone.
Install once the Plone Command Line Client plonecli
1 |
|
Create a Plone Add-On with Svelte app included:
1 2 3 |
|
Confirm every question except
1 |
|
Install and start the Svelte app
1 2 3 |
|
Your Svelte app opens in browser http://localhost:10001/
Open your Add-On in an editor and change the file ‘App.svelte’. Add a <h2>Hello world!</h2>
and see the change reflected in browser.
Change 'svelte_src/my-svelte-app/src/main.js':
1 |
|
Change src/rohberg/expertsearch/svelte_apps/my-svelte-app/index.html:
1 |
|
Integrating in Plone
We will now see how this Svelte app is integrated in Plone.
Open another terminal window, go to the Add-On folder and build your Plone.
1 2 |
|
run the newly created Zope instance
1 |
|
Create a Plone instance and install the Plone package on “Site Setup”.
Integrate your Svelte app in home page by pasting in TinyMCE
1 |
|
The integration is done.
Expert Search
- search form
- fetch data from Membrane
- display fetched user data
We start with a search form.
If you use VSCode, install
svelte.svelte-vscode
to get syntax highlighting and code tips.
For a simple form with search field and selection of the region paste the following code in a new file ExpertSearch.svelte
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Add component ExpertSearch
to your App.svelte
.
1 2 3 4 5 6 7 8 9 10 |
|
You see a simple form that even has an event handler.
The info line below reflects the input of searchstring, because the input value is bound to variable searchstring.
It also reflects the selection of a region, because the event handler sets the value of the variable region.
The loop #each
displays the buttons to filter the results to region.
We can use the values of searchstring and region to fetch the according data of matching membrane users.
We need some experts with information about their competence, region and organization.
Let’s add the Membrane dependency to our Plone package.
1 2 3 4 5 6 7 8 9 10 |
|
We create a behavior 'expert' to add the fields competence, region and organization.
Run
1 |
|
Customize the schema:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Let’s now show some search results.
Fetching the data from Plone via RestAPI
We want to distinguish between Svelte standalone (for testing) and integrated in Plone:
1 |
|
rollup.config.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Now we can define the API URL to be /
for production (integration in Plone) and localhost:8080/Plone/
for developing with a standalone Svelte app.
So we have
1 |
|
where we will fetch the data.
We define an asynchronous function that gets called on mount of the component, on click on a region and on input of a searchstring.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|
The fetch is addressing the REST API of Plone, its sending a GET request with json data. We save the data to variable experts and catch errors like network errors.
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
To have some information for empty search result, we add an else section to the each section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
You see a network error in console. Why is this? Please go to your Plone configuration panel and install plone.restapi
.
To solve the CORS situation we modify the buildout. See https://github.com/plone/plone.rest#cors for more information
buildout.cfg
:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Run buildout.
You see all Persons.
For filtering the search by region or searching for name, competence and organisation we will define an index for region and make name and competence searchable.
catalog.xml
1 2 3 4 5 6 |
|
Customize the schema of the behavior:
1 2 3 4 5 6 7 8 |
|
Add behavior collective.dexteritytextindexer.behavior.IDexterityTextIndexer
to make Membrane User searchable by competence, organisation, first_name and last_name.
Create and customize profiles/default/types/dexterity.membrane.member.xml
by
1 2 3 4 5 |
|
With this in place, membrane users are searchable by competence and organisation fields of the new expert behavior.
We still need the first_name and last_name to be searchable. So add the following to a new file indexer.py
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Register this indexer in configure.zcml
1 2 3 |
|
At last we add an index for last_name to sort the search results for last_name.
1 2 3 4 5 |
|
Restart Plone and reinstall your Plone add-on. If you already have Membrane users recatalog.
Check in Plone Backend that you find your experts by competence, last name etc..
Back to Svelte.
As you have seen we have our component state that we change on user input of a search string and on a region filter selection.
1 2 3 |
|
With our two reactive declarations we have everything to search for experts.
1 2 3 4 5 |
|
Size of build
Size of the production build (npm run build): 88 KB
micro interactions
Apart from some theming of the cards and the form we want to have a nice micro interaction: a smooth search result change while searching and filtering. Svelte offers per default a lot to make this happen. And there is more in the ecosystem to support micro interactions.
For the transition just add the declaration in the card markup.
1 2 3 4 5 6 |
|
You can find the app on https://github.com/rohberg/greenthumb.expertsearch
Information about Svelte
- Official Site with tutorial and API info: https://svelte.dev/
- Excellent training: Maximilian Schwarzmüller on Udemy https://www.udemy.com/course/sveltejs-the-complete-guide/learn/lecture/14689784#overview
- Mozilla Svelte tutorials https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#Svelte_tutorials
Katja Süss, Rohberg, www.rohberg.ch