/todos resource

In previous chapter, we got data from REST API and listed it in a grid. In this chapter, we will use POST, PUT, and DELETE methods of JSONPlaceholder's /todos resource. We will create forms from POST and PUT methods.

Let's create new project with ExtJS theme. Go to Workspace and click New Project button on top right corner.

Name the project REST Tutorial, select ExtJS 3.4 as library and select ExtJS - IWB Theme as main page.

After creating the project click on its name to select the project (to work on it). And click on button next project's name to connect it to VCS Server.

From this point on we will assume you have read the Basics chapter. Therefore, we won't show you how to do basic things(again) and focus more on new materials that we want to teach you in this chapter.

Create JSONPlaceholdeer REST service.

Add ListTodos method. Note that Publish? property must be checked.

Reload cache after adding the method and then click on button to generate its parameters.

Now, let's add AddTodo method. Set its call method as POST and parameters type as json.

Unlike ListTodos method AddTodo's parameters cannot be generated automatically. We need to add them manually one by one. Don't worry though, SAVE&NEW button makes our job a little easier. So, click on button and add 3 parameters userId (Integer), title (String), completed (Boolean) using SAVE&NEW button.

After adding parameters, using edit mode button check Not Null? property of userId and title, and set default value of completed to 0. Then, click on button to commit your changes.

Let's also add GetTodo method to get one specific todo item. We will need to add its parameters manually as well.

note that Out? property of parameters must be checked

Add UpdateTodo method. Set its call method as PUT and real method name todos/${req.todoId}. Parameters will be added manually.

And add DeleteTodo method. It doesn't need parameters.

Lastly, add ListUsers method and generate its parameters by clicking on burn button.

Now, we will create forms from AddTodo and UpdateTodo methods. But before that we need to create web service form template. Go to Pages and create form template called wsForm. Copy and paste the code from here: https://gist.github.com/icodebetter/f351f2780714964aee66794b655b972d

Right click on AddTodo method and select Convert -> Service Method -> Form.

Select wsForm that we just created as its Render Template and make other configurations as shown below. After creating the form insert its form cells from source object.

Create lookup query from ListUsers method. Right click on ListUsers and select Convert -> Service Method -> Query.

Select its type as Lookup Query, change SELECT section as shown below and leave the rest as they are. After creating the query click on burn button to generate its fields.

Change frm_rest_add_todo's userId elemet's UI Component to Combo: Lookup Query and select the query we just created as lookup.

As we did in previous chapter Basics, create query from ListTodos method, create a grid from that query and add that grid to a page (and add page to menu).

Double click on userId field of ListTodos query, change its post process property to Lookup Query and select the lookup query that we created from ListUser method.

Change order, width and align of grid columns so that it looks good.

This is how our Todos page looks like now.

We will add the form we created from AddTodo method as toolbar item to the grid. Go to Toolbar Items of grd_rest_todos and click on button.

We will use function iwb.ui.openForm, its first parameter is id of the form and second parameter is type of the form (2 for insert and 1 for update).

iwb.ui.openForm(6649,2,{},a._grid ? a._grid._refreshGrid || a._grid : null);

Toolbar now has add button and when you click it frm_rest_add_todo will open.

Now, let's create form from UpdateTodo method as well and add it as toolbar item.

var sel = getGridSel(a);
if(sel){
// since it is update form second parameter is 1
iwb.ui.openForm(6655,1,{todoId:sel.id},a._grid ? a._grid._refreshGrid || a._grid : null);
}

And finally add button that calls DeleteTodo method to toolbar item.

var sel = getGridSel(a);
if (sel && confirm('Are you sure?')) {
iwb.ajax.REST("JSONPlaceHolder.DeleteTodo", { todoId: sel.id }, ()=>{
Ext.infoMsg.msg('Success', 'Record Deleted');
a._grid.ds.reload();
});
}

That's it.