Send Parameters to Function

[Roberto Blasco]

Hi all.

I'm working in my first responsive solution .... with plenty of doubts

This's my html code in the component

Code: Select all

<div class="container-fluid">
    <section class="container">
      <div class="container-page">            
         <div class="col-md-6">
            <h3 class="dark-grey">Registro</h3>
            
            <div class="form-group col-lg-12">
               <label>Usuario</label>
               <input type="text" class="form-control" ng-model="model.usuarioID" svy-autoapply>
            </div>
            
            <div class="form-group col-lg-6">
               <label>Contraseña</label>
               <input type="password" class="form-control" ng-model="model.pwd1ID" svy-autoapply>
            </div>
            
            <div class="form-group col-lg-6">
               <label>Repita contraseña</label>
               <input type="password" class="form-control" ng-model="model.pwd2ID" svy-autoapply>
            </div>
                        
            <div class="form-group col-lg-6">
               <label>Correo Electrónico</label>
               <input type="text" class="form-control" ng-model="model.email1ID" svy-autoapply>
            </div>
            
            <div class="form-group col-lg-6">
               <label>Repita Correo Electrónico</label>
               <input type="text" class="form-control" ng-model="model.email2ID" svy-autoapply>
            </div>                  
         </div>
      
         <div class="col-md-6">
            <h3 class="dark-grey">Términos y condiciones</h3>
            <p>
               By clicking on "Register" you agree to The Company's' Terms and Conditions
            </p>
            <p>
               While rare, prices are subject to change based on exchange rate fluctuations -
               should such a fluctuation happen, we may request an additional payment. You have the option to request a full refund or to pay the new price. (Paragraph 13.5.8)
            </p>
            <p>
               Should there be an error in the description or pricing of a product, we will provide you with a full refund (Paragraph 13.5.6)
            </p>
            <p>
               Acceptance of an order by us is dependent on our suppliers ability to provide the product. (Paragraph 13.5.6)
            </p>
            
            <button type="button" class="btn btn-success" svy-click="handlers.alta_t900_usuarios($event)" svy-autoapply>Registrar</button>
         
            </div>
      </div>
   </section>
</div>


This is the spec file

Code: Select all

{
   "name": "pethistory-ph-Sign-Up-Form",
   "displayName": "Formulario de Registro Usuario",
   "version": 1,
   "definition": "pethistory/phSignUpForm/phSignUpForm.js",
   "libraries": [],
   "model":
   {
      "userID"    : {"type" : "dataprovider", "pushToServer": "allow"},
      "pwd1ID"       : {"type" : "dataprovider", "pushToServer": "allow"},
      "pwd2ID"       : {"type" : "dataprovider", "pushToServer": "allow"},
      "email1ID"       : {"type" : "dataprovider", "pushToServer": "allow"},
      "email2ID"       : {"type" : "dataprovider", "pushToServer": "allow"}
   },
   "handlers":
   {
      "alta_t900_usuarios"    : "function"
   }
}


How can do the magic to send the parameters userID, pwd1ID, pw2ID, email1ID and email2ID to the function 'alta_t900_usuarios'

( alta_t900_usuarios = sign up user .... translated to english)

to process them in the form function ?

Best regards. Roberto Blasco

[Andrei Costescu]

So you have 5 dataproviders defined in your component's model which are 'allow' and will 'svy-autoapply' (so send changes into the server-side dataprovider automatically).
That means that in developer when you put that component on a form you pick 5 dataproviders (columns, global/form variables) to work with your component.

So when you trigger "alta_t900_usuarios" those server side variables/columns should already be set.
I don't understand why you want those dataproviders sent in the handler as well. I mean you could:

• as it is now - just use the dataprovider values on server directly - no need for handler arguments
• if you want them to be sent by the handler just send them in the handler as values (you don't even need them declared in the model of your component - you just take them from the inputs on click and send them over). You could do that by using in svy-click a function defined in the component's js in $scope.xyz for example and in that function send to $scope.handlers.alta_t900_usuarios(your_arguments_that_you_get_from_where_they_are). Example of defining such a handler in spec and then using it in js:
  

  Code: Select all

  "handlers":
{
   "onCellClick" : {
      "parameters" : [
         { "name" : "row", "type" : "int" },
         { "name" : "column", "type" : "int" }
      ]
   },
(...)

  Code: Select all

  if ($scope.handlers.onCellClick) {
    $scope.xyz = function(event) { // this one is used in your svy-click
        $scope.handlers.onCellClick(getInput1Val(), getInput2Val());
    }
}

• make those 5 dataproviders just strings/ints/whatever they need to be and instead of svy-autoapply you define them as pushToServer: "shallow". Then when you call the handler with no arguments, you can read the 5 values directly from the component's model (for example elements.mycomp.userID)

You don't need that svy-autoapply on the button (that is only for when dataproviders are used in ng-model and you want to auto-push the value). I didn't check the rest of the markup in detail though.

[Roberto Blasco]

Thanks a lot Andrei, I am going to try it

Too many concepts still to learn about servoy and responsive

Best regards. Roberto Blasco

[Roberto Blasco]

Hi again.

I've tried to do it again ....

This is my javascript from my component

Code: Select all

angular.module('pethistoryPhSignUpForm',['servoy']).directive('pethistoryPhSignUpForm', function() { 
    return {
      restrict: 'E',
      scope: {
         model: '=svyModel',
        handlers: '=svyHandlers',
      },
      controller: function($scope, $element, $attrs) {
        
         if ($scope.handlers.onClick_alta_t900_usuarios) {
               $scope.getParamValues = function(event) {
                  $scope.handlers.onClick_alta_t900_usuarios("Roberto", "1234", "456", "r@a", "r@b");
               }
         }
      },
      templateUrl: 'pethistory/phSignUpForm/phSignUpForm.html'
    };
  })

This is the spec file

Code: Select all

{
   "name": "pethistory-ph-Sign-Up-Form",
   "displayName": "Formulario de Registro Usuario",
   "version": 1,
   "definition": "pethistory/phSignUpForm/phSignUpForm.js",
   "libraries": [],
   "model":{},
   "handlers":
   {
      "onClick_alta_t900_usuarios" : {"parameters" : [
         {"name" : "usuario",    "type" : "string"},
         {"name" : "pwd1",       "type" : "string"},
         {"name" : "pwd2",       "type" : "string"},
         {"name" : "email1",    "type" : "string"},
         {"name" : "email2",    "type" : "string"}
      ]}
   }
}

And this is the html

Code: Select all

<div class="container-fluid">
    <section class="container">
      <div class="container-page">            
         <div class="col-md-6">
            <h3 class="dark-grey">Registro</h3>
            <!--<form data-toggle="validator" role="form">-->
               <div class="form-group">
                  <label>Usuario</label>
                  <input type="text" class="form-control" id="usuario" ng-model="model.usuarioID" svy-autoapply >
               </div>
               
               <div class="form-group">
                  <div class="form-group">
                     <label>Contraseña</label>
                     <input type="password" class="form-control" id="pwd1" svy-autoapply data-minlength="6" >
                     <span class="help-block">La contraseña debe tener un mínimo de 6 caracteres</span>
                  </div>
                  
                  <div class="form-group">
                     <label>Repita contraseña</label>
                     <input type="password" class="form-control" id="pwd2"  data-match="#inputPassword" data-match-error="Las constraseñas no coinciden" svy-autoapply data-minlength="6" >
                  </div>
               </div>
                           
               <div class="form-group">
                  <label>Correo Electrónico</label>
                  <input type="email" class="form-control" id="email1" svy-autoapply  data-error="El correo electrónico no es correcto.">
               </div>
                  
               <div class="form-group">
                  <label>Repita Correo Electrónico</label>
                  <input type="email" class="form-control" id="email2" svy-autoapply  data-error="El correo electrónico no es correcto.">
               </div>         
               
               <div class="col-sm-6">
                  <input type="checkbox" class="checkbox" />Suscribirse a nuestras publicaciones
               </div>

               <div class="col-sm-6">
                  <input type="checkbox" class="checkbox" />Enviar notificaciones a este correo electrónico
               </div>

               <div class="col-md-12">
                  <h3 class="dark-grey">Términos y condiciones</h3>
                  <p>
                     By clicking on "Register" you agree to The Company's' Terms and Conditions
                  </p>
                  <p>
                     While rare, prices are subject to change based on exchange rate fluctuations -
                     should such a fluctuation happen, we may request an additional payment. You have the option to request a full refund or to pay the new price. (Paragraph 13.5.8)
                  </p>
                  <p>
                     Should there be an error in the description or pricing of a product, we will provide you with a full refund (Paragraph 13.5.6)
                  </p>
                  <p>
                     Acceptance of an order by us is dependent on our suppliers ability to provide the product. (Paragraph 13.5.6)
                  </p>
                  <button type="button" class="btn btn-success" svy-click="scope.getParamValues()">Registrar</button>
               </div>
            <!--</form>-->
         </div>
      </div>
   </section>
</div>

function in handlers onClick_alta_t900_usuarios is triggered by the function $scope.getParamValues declared in javascript componentes file inside controller's section and used in the html file.

But it doesn't works ..... Do I have forget anything?

Thanks in advance. Best Regards, Roberto Blasco.


I use "scope.getParamVa

[paronne]

Hi Roberto,

is your function getParamValues actually being called on the client ?

if you add a log output do you see it in the console of the Browser ? :
if ($scope.handlers.onClick_alta_t900_usuarios) {
$scope.getParamValues = function(event) {
console.log("calling the handler");
$scope.handlers.onClick_alta_t900_usuarios("Roberto", "1234", "456", "r@a", "r@b");
}
}

Apart of the handler issue, the approach you used for your web component is not recommended. Web component should be unit part of the UI which can be re-used over yuor forms; in this case it's seems to me that you have moved all the logic of a login form into a Web-component; you can't easy re-use your web-component, real forms are actually more flexible than this component since they allow you to inherit the form and override inherited properties.
You could have achieved the same UI/UX by designing a Responsive Form ( mark the checkbox responsive when creating a new form ) very likely without the need of creating any custom web component.
If you don't feel familiar with the Responsive Form designer, you can make use of the Outline View of the Responsive Form. In the Outline View you can right-click on the elements and add div,containers,row,columns,components as you would do in HTML. You have some restrictions driven by the bootstrap logic: Components should alwasy, Row can containts only Columns and Columns can be placed only inside Rows, Components can be placed inside a Column or inside a Div...

[Roberto Blasco]

Thanks a lot paronne for your answer.

I found the bug .... The form and the component were not linked.

Best regards.