eZ Community » Blogs » Charles-Edouard Coste » View parameters and accessible forms

By

Charles-Edouard Coste

View parameters and accessible forms

Thursday 22 August 2013 1:01:01 pm

  • Currently 3 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Every eZ developer knows how to use view parameters to filter articles or to use pagination. But if adding a parameter to an url is quite simple, how can with deal with forms?

Get parameters or View parameters?

Let's say that we are on mysite.tld/my-folder and you want to display articles from #200 to #300.

Generally, you will use such url: mysite.tld/my-folder/(offset)/200/(limit)/100

Then in your template, you will only need to use:

def articles = fetch('content', 'list', hash('parent_node_id`, $node.node_id,
                                                               'offset', $view_parameters.offset,
                                                               'limit', $view_parameters.limit,
                                                               ...)

When you want to make a pagination list of links, you are dealing with the both parameters to make a "single choice" for each link.

But now, let's say that you want to let the user choose the limit and offset value himself...

You'll probably need a form :

<form action={$node.url_alias|ezurl} method="GET">
  <fieldset>
    <label>
      <span>Offset</span>
      <select name="offset">
        <option value="0">0</option>
        <option value="100">100</option>
      </selected>
    </label>
    <label>
      <span>Limit</span>
      <select name="limit">
        <option value="100">100</option>
        <option value="200">200</option>
      </selected>
    </label>
    <input type="submit" name="Submit" value="Filter" />
  </fieldset>
</form>

In general, we want to stay on the same page, so we generally set the action attribute with {$node.url_alias|ezurl} (we will see that it's not the best way) and method to "get"

So we will redirect on: mysite.tld/my-folder?offset=100&limit=100

No view parameters! So what can we do about this?

The crappy javascript way

Yeah! It's possible to use javascript to fetch fields values and handle the submit event to redirect on a given URL instead of sending the form.

It's possible, but I never did that, I won't do that, and I don't want to make a effort to write how to do that. So let's jump to the next solution... (the eZ way)

Let's do some action!

The content/action module will save us here.

First, let's replace {$node.url_alias|ezurl} by {'/content/action'|ezurl} and move it to a new hidden field named "DestinationURL".

Then, let's add some parenthesis arround our variables name:

  • "offset" => "(offset)"
  • "limit" => "(limit)"

Finally, to make it work, we need to send this as a "POST" request.

So here we are :

<form action={'/content/action'|ezurl} method="POST">
  <fieldset>
    <input type="hidden" name="DestinationURL" value="{$node.url_alias}" />
    <label>
      <span>Offset</span>
      <select name="(offset)">
        <option value="0">0</option>
        <option value="100">100</option>
      </selected>
    </label>
    <label>
      <span>Limit</span>
      <select name="(limit)">
        <option value="100">100</option>
        <option value="200">200</option>
      </selected>
    </label>
    <input type="submit" name="Submit" value="Filter" />
  </fieldset>
</form>

When sending this kind of form, the content/action module fetches every parameters except 'Submit", to join them into a "destination/key1/value1/key2/value2/..." string before doing a redirection.

Conclusion

Now you can build any kind of filter form in a cache-friendly way, with no dirty template code and no intrusive javascript.

Proudly Developed with from