Reactive search filter available filters - reactjs

I have set up a sample application based on filtering car sales
https://codesandbox.io/s/h0eb4
I've set up simple 'Make' and 'Model' filters, but I want the 'Model' filter to update based on the 'Make' field.
Do I need to dig into elastic search API to do this with custom aggregations, or is there a way of doing this using the reactive search UI components?
If someone can either advise me on the pure elastic search way of doing this, (post parameters for the queries) or using the reactive search UI components, that would be great.

You should just be able to add a react property to the Model list, which causes it to respond to changes in the Make list (list-1 in your sandbox).
react={{and:"list-1"}}
Here is a fork of your sandbox.
https://codesandbox.io/s/elated-dew-4zhep

Related

in salesforce Dynamic action filters not working for community

Dynamic action filters only work for internal users (admin) but not community view.
Scenario - I am using the dynamic action filters for the conditional rendering of button.
Dynamic Actions are not yet available in Experience Cloud, unfortunately.
There is an idea on the IdeaExchange to add it.

react ui generator for graphql - apollo

Does it exist a tool (or a combination of libraries) to generate react pages/components according to a graphql schema?!
Something that is able explore the schema to generate a simple page with a table where the graphql query returns a list (possibly, a table with edit/delete button linked to a simple page with form to edit/modify the selected element).
Simple CRUD pages in other words!
Something able to generate a sort of menu based on the relations described in the schema.
If doesn't exist something readymade, any suggestion about how to automate the creation of some ui parts.
Opensource or commercial

JHipster : Custome pagination with post method and parameter

I generated one application using JHipster V3. I am trying to modify the search functionality and adding some kind of filter where user select some filter and hit search button and my angular search controller will make a POST call to my API.I did modification on server side to support filter search and return data.
Now I want to modify pagination link so that they also make a POST call with selected filter data instead of GET.
I did some investigation and found that when user click on link call goes to 'ui-bootstrap-tpls.min.js' [selectPage] function.
I dont want to make any changes on this js as it is global and will work for other UI screen.
Is there any better approach to implement such requirements?

in backbone.js can a Model be without any url?

I have an app where the menu system is built dynamically using metadata fetched at startup. Based on this data, and menu selections, I need to craft a "filter box" where user can input search criteria. The "main" View consists of a filter box plus a search results panel where result(s) are rendered in accordance with their classes.
Can I model the Filter Box as a Backbone.js Model? It does not have any data fetches from the backend as its composition depends entirely on the menu selections + the metadata? E.g. when user selects "Sales" menu then the filter box might prompt for "Sales Order Number" whereas when user selects "Material" then the filter box might prompt for something else.
I would then use this widget as component of the "main" View, along with a set of results views made up on the fly. As users make their menu selections, this main View will un-render the existing filter box and recompute and re-render a new one. Other components on the screen could query the Filter Box for its settings.
The examples I have seen so far always have a url and a server fetch, save, etc. The only url-free example on the tutorial page says it is a "contrived" example. I was wondering if a backend provider is necessary and programming will be full of gotchas without conforming to this requirement.
Thanks.
You can have models without url property defined. One of the building blocks of Backbone is the Sync object, that will help you when pulling and pushing data, ideally from/to REST endpoints. For this to work you need to tell where the data are served, and to do so you set a value to url on Models or Collections.
If you don't need server comunication but you just want to use the utilities provided by simple Model or Collection (such as event handling, filtering, etc..) you just don't set url and you are good to go (just keep in mind that methods like fetch or save won't work).
Yes you can use Backbone for your DOM logic too. A model doesn't need to represent data from the server. Do whatever you like with the few basic elements of Backbone, simply use them when you feel like it'd do a great job :)

Backbone maintaining state

I am developing a JavaScript heavy single page app with Backbone.js. The goal is as follows;
The user starts with a set of multiselect boxes which are populated with filter elements to query a set of resources. These multiselect boxes are dependent of eachother. Furthermore, the elements in the multiselects are queried from the server and depend on the user that is logged in, in other words they depend on the resources that are associated with the user that is logged in.
The user fills out the multiselect boxes and presses a "filter" button. When this is pressed a collection is fetched, thereby using a set of query parameters (multiple array values) to get the set that reflects the filter elements.
When the collection is fetched the view with the resources appear. This view has multiple subviews, and it must be possible to drill down on specific resources while maintaining state (the collection that is fetched as a result of the query parameters)
How to maintain state in a Backbone app in such a use case? I've looked through many examples but all are to simple to be useful.
I am new to backbone.js and trying to develop a single-page app using Backbone.js. In my limited understanding of backbone.js documentation, I did not come across a better way of maintaining state using backbone.js core. However, in the past, I have worked with jStorage: http://www.jstorage.info/ , a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. It is simple to integrate and get started. In my app, I am going to use this for the time being... I thought this could be shared...hence I mention it here when I came across this question... I hope this would be of some help

Resources