best way to put together components that interact between them

[Bernardo Leon]

Hi, I am trying to create a page that uses 3 components. I want each component to be reusable.

The first component is a search box, based on the search box result I want to load the second component (a grid) with the first result as a parameter. When I click on a link in the second component grid I want to load a third component based on wich link I pressed in the second component.

What would be the best way to accomplish this? Making this 3 components interact while maintaining an elegant code and reusability of the components?

Thank you!

[Marlysson Silva]

Are you using the some frontend framework? As Vuejs , angular , react ..

Or many pages html loaded by the load function ?

[Bernardo Leon]

The second option. Many pages loaded by the load (or w2p_component) function

[Marlysson Silva]

Try on action in a component ( click , submit , any event ) make this:

http://web2py.com/books/default/chapter/29/12/components-and-plugins?search=load#Reload-another-component

Reload other component .. but before of the reload the component , use the javascript to show it and so perform the feature..

I think

The documentation too use the .reload method of jquery lib to reload the div that contains the component ( Other approach )

Em sexta-feira, 24 de fevereiro de 2017 18:25:42 UTC-3, Bernardo Leon escreveu:

[Bernardo Leon]

Hi! Thank you for your time. I am satisfied with the results, I didn't knew that response.js or _onclick for instance can execute code in the parent component, that way I could solve this problem.

When I write OOP I create classes which do only one thing and in the end I have a client class/script/whatever where I use this classes objects to solve the problem at hand. I wanted to replicate this way of development on web2py and was able to do it.

In my case I wanted to compose a page with a search employee component, a contracts of the employee component and finally a absentism of the employee on that specific contract. As you may see it is a cascading master -> detail -> detail database schema.

my search component is this:

# -*- coding: utf-8 -*-

def index():

    form_busqueda = SQLFORM.factory(Field('apellidos_nombres', 'string'),

                                    Field('cedula', 'string', requires=IS_NOT_EMPTY()),

                                    submit_button='Buscar')

    form_busqueda.element(_name='apellidos_nombres')['_readonly'] = True

    if form_busqueda.process(keepvalues=True).accepted:

        empleado = db(db.empleado.cedula == form_busqueda.vars.cedula).select(db.empleado.id,

                                                                              db.empleado.apellidos,

                                                                              db.empleado.nombres).first()

        apellidos_nombres = '%s %s' % (empleado.apellidos, empleado.nombres)

        form_busqueda.element(_name='apellidos_nombres').update(_value=apellidos_nombres.upper())

        response.flash = None

        response.js = 'response_busqueda_empleado(%i);' % empleado.id

    return dict(form_busqueda=form_busqueda)

As you may see I use response.js to call a javascript function. I see this function like an OOP interface therefore my client page will have to implement this function.

This is my client view:

{{extend 'layout.html'}}

<div class="row">

    <div class="col-md-12">

        <h2 align="right">Ausentismos</h2>

    </div>

</div>

<div class="row">

    <div class="col-md-9" id="div_busqueda_empleado">

        {{=LOAD('busqueda_empleado', 'index.load', ajax=True, target='div_busqueda_empleado')}}

    </div>

</div>

<div class="row">

    <div class="col-md-12" id="div_contratos_empleado">

        {{=LOAD('contratos_empleado', 'index.load', ajax=True, target='div_contratos_empleado')}}

    </div>

</div>

<div class="row">

    <div class="col-md-12" id="div_ausentismos_contrato">

        {{=LOAD('ausentismos_contrato', 'index.load', ajax=True, target='div_ausentismos_contrato')}}

    </div>

</div>

<script>

    function response_busqueda_empleado(id_empleado) {

        web2py_component("{{=URL('contratos_empleado', 'index.load')}}"

                        .concat('?id_empleado=').concat(id_empleado), "div_contratos_empleado");

    }

    function response_contratos_empleado(id_contrato) {

        web2py_component("{{=URL('ausentismos_contrato', 'index.load')}}"

                .concat('?id_contrato=').concat(id_contrato), "div_ausentismos_contrato");

    }

</script>

Here, where I LOAD my component I implement as well the response_busqueda_empleado function. For another component I have used _onclick inside an A helper to achieve exactly the same as response.js.

So this is the principle I could reproduce. There is a client (this view) who uses a component and implements some sort of callback for this component, in this callback I load the cascading components. Now I have components that do only one thing and can be reused on another pages, this is really awesome!

The last bit missing is that I had to write: 

{{=URL('ausentismos_contrato', 'index.load')}}".concat('?id_contrato=').concat(id_contrato)

because I was having problems with the vars parameter of URL. I know that this could have to do with id_contrato existing only in client side after the view rendered in the server but It would be great if someone could point me to an elegant solution for this part of creating a URL that passes vars arguments when the client side code executes.

Thank you and this is the way I did it and I think it is solving my problem and I hope it helps anyone looking for a solution like this!

[Marlysson Silva]

Awesome , You could to write a post explain this :D .

Em sexta-feira, 24 de fevereiro de 2017 18:25:42 UTC-3, Bernardo Leon escreveu:

[Bernardo Leon]

Thank you, I don't have a blog or similar so I wouldn't know where to post this hehe I have seen web2py slices but I think it is abandoned now

[Dave S]

On Tuesday, February 28, 2017 at 11:00:46 AM UTC-8, Bernardo Leon wrote:

Thank you, I don't have a blog or similar so I wouldn't know where to post this hehe I have seen web2py slices but I think it is abandoned now

Not abandoned, but fragile and needing care.

If you do stackoverflow, that is a possible place, or maybe gist would be helpful.

/dps