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
Related
Can someone explain the difference between a search framework such as Search UI and UI libraries such as PrimeReact? Search UI seems to contain pre-built form components which can be used for a site search. PrimeReact for example, also contains pre-built form components which can be used for a site search.
I realise that Search UI was built to connect to ElasticSearch but it also says it can connect to any backend search API. I have an existing GraphQL API and need to create some fairly simple site search functionality using pre-built UI components.
When would you use one instead of the other and what are the benefits?
I'd like to generate an "out of the box, customer facing" (within reason!) React UI from an OpenAPI specification - here is my shopping list of nice-to-haves:
Show a list of API entities with some sort of hierarchy where they are related
Clicking on an entity would display a paged, sortable, filterable grid for that entity
Basic UI for adding/editing new entity complete with type editors/validation for each entity property
Allowing for styling/logic customisations whilst still allowing re-generation of the UI
I am aware of the Swagger UI project and even the React version, but it generates a very tech-centric output which is great for experimenting with the API but not quite what I am after here in terms of a customer-facing application - perhaps it can be customised, or does anyone know of alternatives?
I am trying to use both components in my angular application. I am a backend developper and absolutely newbie in angular. I have been reading the roles and users components in the source code and I think I cloned it for my Customers component. I have guards, defaults and all the code like Roles and Users but, although the code compiles and the API call is done, I have nothing in the screen, only the Total records are displayed. No action buttons, no table rows, no pagination...
Is there anyone who has use these components and can bring me some help?
Many thanks
Those components are needed for customizing built-in modules. Let's talk about Users for example. The Users component is a built-in page and you do not have access to its code. However, you may still need to make some changes like adding a New User button on the toolbar or changing its columns, form fields etc. That's why ABP Framework provides some injection tokens to override/extend/customize these features. Since you are developing your own page, you do not need any of this. You can directly use ngx-datatable in your own component, add or remove columns and so on.
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
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 :)