Looking for an example of a grid and form

Learning Team
1

I want to transfer a React app to Ember app (Line-of-business application). The documentation/guidelines are great but I am missing an example on how to create a grid/table with Ember Data and creating a CRUD form with Ember data (Octane if possible).

Could you help me with this?

2

Hi @geert, welcome to Ember!

Typically a good place to start is deciding on your routing structure and your data models. Let’s say you want an index route for listing models in a table, a detail route for viewing/editing a single model, and a create route for adding new models.

First create your ember data model for the resource you’d like to CRUD.

Next you may want to create your index route. Typically you’d load the resources in the model hook using store.query or store.findAll. The results of the model hook are injected into the model property on the controller (whether you define the controller explicitly or not), so you can reference it in the route template with @model to render it. Sometimes it’s easier to start by rendering everything in your route template and then migrating it to components, but if you already know how you want to structure your components you might as well do that from the jump. The most basic index template imaginable could look like this (let’s say you’re rendering users):

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    {{#each @model as |user|}}
      <tr>
        <td>{{user.firstName}} {{user.lastName}}</td>
        <td>{{user.email}}</td>
        <td>{{user.address}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>

Next you could create your detail route and template. Then in your index template link each table item to the detail route using <LinkTo ...>. For example:

        <td><LinkTo @route="user" @model={{user}}>{{user.firstName}} {{user.lastName}}</LinkTo></td>

Then, hypothetically, you could create a “new” or “create” route which adds a new model, renders a form to fill out the model fields, and has an action to save the data and (probably) redirect to the detail view with the new record. Then maybe add a link in the index template to the “new” route. The simplest version would create a record in the route and return it from the model hook, then the route template could bind inputs directly to the model properties, then on form submit call <model>.save(). Once the save completes you could redirect to the detail route with transitionTo('user', model).

Last you need the “D”, so adding buttons in the index route and/or the detail route that simply call <model>.destroyRecord()is a good place to start.

Anyway, that’s at a high level. The documentation should provide good overviews of doing any of the above things. You’ll want to have a good handle on defining routes, writing templates, loading data with Ember Data, and creating actions. And getting familiar with the component model would definitely be beneficial though it’s not strictly necessary to create a simple crud app.

If you’re looking for real-world app examples, there’s a handy list of some real world open source ember apps here. Ghost Admin, for example, seems like it might have some CRUD functionality and is on Octane.

3

Thank you. This helped me already a lot. I love the Ember community and the documentation.

You can expect that I will contribute when I get it all.

4

Please do! IMO the community is one of the best parts of Ember. Definitely feel free to ask any more questions here or in the discord channels if you get stuck anywhere!

5

You might try Ember Paper forms. It also has an add-on for tables.