[IMPLEMENTED] Sidebar Plugins

[sagun786]

Hi @Sebastian

Just like how I can overide Custom Editor, is there a way to overide default Squidex Search with Algolia/Elastic search inside Squidex Cloud. The Content team is facing lot of search issues as the content size keeps growing especially when it comes to multi-locale based content. The only way out seems to use our frontend search powered by Algolia even at Squidex CMS Cloud instance level.

Can you suggest of this is achievable as an AddOn / Or Via Scripting to overide Squidex UI functionality at the CMS level

This would really help us as Algolia has Instant Search in Angular and Squidex CMS UI is also in Angular

[Sebastian]

What issues do you face?

[sagun786]

@Sebastian, Thanks for asking

The content team does not like Vanilla search just in the current form( A lot of times they only get exact keyword match, but not results or suggestions for typos- which is very common for over worked tired editors scrambling for deadlines).

They have had a taste of Algolia before on a different product of ours at the frontend. The fact they realize that we can build search capabilities on top of Algolia for frontend users/customers, they want the same experience at the CMS level. As a non-technical members of our team they fail to realize why the same functionality achieved in frontend can’t be duplicated at CMS level ( at the end maing them claim it as a product limitation at Squidex level. I don’t know how easy it is to override search box for advanced customers in Squidex

Publishing houses using CMS with multi-locale support heavily depend on search function to be able to randomly search content at editorial level. They like an Algolia powered search and definitely demand it at the CMS level.

[Sebastian]

I was thinking about sidebar plugins, it can be probably solved with that, but I cannot just replace the search plugin. It has several requirement that the plugin writer needs to fulfill.

But fuzzy search works in the search as well, for example you can try the following syntax

“sumer~2” finds “summer” in my case. But I have no idea how good it works for CJK languages.

Would you pay for an Algolia extension? Like an addon for a fixed price.

[Jiri]

Hello Sebastian
it will be nice if in case you have for example Airports with IATA code and you want to search by that it won’t work well because I apply some “clever” matching on other fields instead of the show the first item with an exact match. I do not know how hard it was to improve this use case.

[Sebastian]

I am not sure how good algolia is with this scenario, but you need a lot of knowledge about your content to provide a good solution for that.

For example in Lucene you would have to boost the Iata field to give it more weight.

[Jiri]

I wrote to this thread but I should maybe start new. Because I do not want to replace the build-in search it works most of the time fine but this is one case that we hit most of the time. It will be nice if it will be possible to define some weight in squidex but I do not know how hard it was and how many peoples use it because it requires to manually tune weight. For us will be fine if it was possible to add higher priority to the exact match on the field I think that makes sense.

[Sebastian]

I think it does not make that much sense.

I am also considering to remove the current lucene implementation and replace it with MongoDB full text as it is too buggy and then we can think about how to make a deep integration into elastic or algolia. But I do not want to write my own UI for full text indexes, there is too much stuff.

[sagun786]

@Sebastian

With Algolia integration you get an Angular UI library which takes care of search results being displayed in a standardised way. The endeavour almost is like a TinyMCE Custom Editor like integration for users who want to upgrade their search experience can utilize an Algolia search integration

What is Angular InstantSearch?

Angular InstantSearch is an open-source, production-ready UI library for Angular that lets you quickly build a search interface in your front-end application.

Our goal is to help you implement awesome search experiences as smoothly as possible by providing a complete search ecosystem. InstantSearch tackles an important part of this vast goal by providing front-end widgets that you can assemble into unique search interfaces.

[Sebastian]

I don’t see how this helps. This is the smallest part of the the implementation to adapt the UI.

[Sebastian]

I have no plans to implement this.

BUT: I am thinking about sidebar plugins since a while now. Perhaps this can be implemented with this approach.

[sagun786]

@Sebastian

I already have completed two custom editors (tinymce custom editor, AWS S3(using retool.com) ) inside Squidex and can feel the extensibility powers of Squidex with GraphQL for a headless CMS

I would love to integrate Algolia search as a sidebar plugin. Please provision this functionality as it makes a stronger case for using Squidex as the underlying platform for more content management in one place

[Sebastian]

Yes, I am working on it at the moment.

[Sebastian]

I have something working now:

You can configure sidebar urls now:

Then you get a new icon in the contents or content view:

And this is my test algolia plugin:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.0.0/dist/algoliasearch-lite.umd.js" integrity="sha256-MfeKq2Aw9VAkaE9Caes2NOxQf6vUa8Av0JqcUXUGkd0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" crossorigin="anonymous">

    <style>
        .container {
            min-height: 400px;
        }

        .ais-Hits {
            margin-top: 1rem;
        }

        .ais-Hits-item {
            margin-right: 0;
            margin-top: 5px;
            width: 100%;
        }

        .button-click {
            margin-top: 5px;
            color: #3389ff;
            cursor: pointer;
            display: inline-block;
        }

        .button-click:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <script>
        function grow(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight)+"px";
        }
    </script>

    <div class="container">
        <div id="searchbox"></div>

        <div id="hits"></div>
    </div>

    <script>
        var element = document.getElementById('editor');

        var plugin = new SquidexPlugin();

        plugin.onInit(function (context) {
            if (context) {
                var searchClient = algoliasearch('CFNTEE51PJ', 'afa3a7605277b85348c6fa160fb5cecc');

                var search = instantsearch({ indexName: 'test', searchClient });

                document.addEventListener('click', event => {
                    if (event.target.matches('.button-click')) {
                        var id = event.target.getAttribute('data-object-id');

                        plugin.navigate(`/app/${context.appName}/content/${context.schemaName}`);
                        // plugin.navigate(`/app/${context.appName}/content/${context.schemaName}/${id}`);
                    }
                });

                search.addWidgets([
                    instantsearch.widgets.searchBox({
                        container: '#searchbox',
                    }),

                    instantsearch.widgets.hits({
                        container: '#hits',
                        templates: {
                            item(hit, bindEvent) {
                                return `
                                    <div>
                                        <div class="hit-name">
                                            ${instantsearch.highlight({
                                                attribute: 'firstname',
                                                hit,
                                            })}
                                            ${instantsearch.highlight({
                                                attribute: 'lastname',
                                                hit,
                                            })}

                                            <div>
                                                <a data-object-id="${hit.objectID}" class="button-click">EDIT</a>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }
                        },
                    })
                ]);

                search.start();
            }
        });
    </script>
</body>

</html>

[Tahir_Olaosebikan]

@Sebastian I am currently trying to configure sidebar url for search functionality, but i can’t see the content sidebar extension in the schema section. Is it something i have to select during schema creation to have it in the ‘more’ section? or this provision is just not in squidex cloud yet ?

[Sebastian]

It is not deployed yet, I will do it today.

[Sebastian]

It is deployed to the Cloud now.

And there s a little of documentation: https://docs.squidex.io/02-documentation/developer-guides/custom-sidebars

[Tahir_Olaosebikan]

Hi @Sebastian,
Can I access flatData in squidex rules section as webhooks to pass payloads to algolia for example ?

[Sebastian]

No, but you can control the shape of the document:

[IMPLEMENTED] Open Algolia for all event types

@Sebastian I tested the above by adding a new image to assets. Probably I am not using the right variables in payload? ASSET_URL and ASSET_DATA are both coming as undefined Here is the payload I am triggering Script(JSON.stringify( { "objectID": ASSET_ID, "img_url": ASSET_URL, "img": ASSET_DATA } )) [26%20PM] At Algolia I am getting undefined img_url and img [40%20PM]

I recommend to only add the fields you need.

[Tahir_Olaosebikan]

Ok, I’m trying to create a JSON payload with all Parent-Child Entries for a given parent. Thinking of possibilities of this in the rules section.