AG App - field display options

Wish to see a specific feature/change in future releases? Feel free to post it here, and if it gets enough "likes", we'd definitely include it in future releases!
Post Reply
grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

AG App - field display options

Post by grimblefritz » 2016-07-20 12:56

Ahmad,

I'd like to see an expansion of the "readonly" option for field attributes.

1. The current readonly (text in a div) option be renamed "Show value".

2. A new "Read only" option, that creates an html field, with the readonly attribute set.

3. A new "Disabled" option, that creates an html field, but with these attributes:

Code: Select all

readonly  onmousedown="return false;"  style="cursor: not-allowd; background-color: {theme-consistent-color};"

// or more likely, using a style tag such as .disabled-field, etc
Regarding this last option, as I've explained elsewhere, the impact of true html 'disabled' fields, is that when records are written to the database disabled fields are written as null values. This third option mimics the appearance and behavior of disabled, without the negative impact on data.

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-20 13:52

How to implement the 'disabled' field:

Code: Select all

$j('#fieldname').prop('readonly', true);
$j('#fieldname').prop('tabIndex', -1);
$j('#fieldname').prop('style', 'cursor: not-allowed; background-color: #EEE;');
$j('#fieldname').mousedown(function(){return false;});

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-20 15:36

Oh, you are "that Scott" :D
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-20 20:23

Hmm... I'll take that as a complement 8-)

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-20 20:30

Of course, it is
/Giuseppe
Professional Outsourcing Services

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-28 14:45

I have a question on this. How do you manage right now a "ReadOnly" field but you want to change the value programmatically and be saved on database?

I mean, a field woorking as a label. Don't know if I explained.
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-28 15:38

If you use the AppGini readonly, then the field is only displayed, basically as a label. It's not an html form element. You can change the value that's displayed, but it's not saved when you save the form.

You can not set the AppGini readonly, then use jquery to add the readonly attribute to the form field. This allows the value to be updated, and the changes will be saved with the form. The problem I have with this is that the cursor can still enter the field and it remains in the tab order.

So, what do I use?

I use the pseudo-disabled technique I proposed:

Code: Select all

$j('#fieldname').prop('readonly', true);
$j('#fieldname').prop('tabIndex', -1);
$j('#fieldname').prop('style', 'cursor: not-allowed; background-color: #EEE;');
$j('#fieldname').mousedown(function(){return false;});
This makes the field readonly,
takes it out of the tab order,
prevents the cursor from entering the field (such as, by a mouse click),
changes the cursor when it moves over the field,
and alters the background color.

If you want to have the field look more like a label instead of a field, I'm sure you could tweak the style in that third .prop command.

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-28 15:50

grimblefritz wrote:If you use the AppGini readonly, then the field is only displayed, basically as a label. It's not an html form element. You can change the value that's displayed, but it's not saved when you save the form.

You can not set the AppGini readonly, then use jquery to add the readonly attribute to the form field. This allows the value to be updated, and the changes will be saved with the form. The problem I have with this is that the cursor can still enter the field and it remains in the tab order.

So, what do I use?

I use the pseudo-disabled technique I proposed:

Code: Select all

$j('#fieldname').prop('readonly', true);
$j('#fieldname').prop('tabIndex', -1);
$j('#fieldname').prop('style', 'cursor: not-allowed; background-color: #EEE;');
$j('#fieldname').mousedown(function(){return false;});
This makes the field readonly,
takes it out of the tab order,
prevents the cursor from entering the field (such as, by a mouse click),
changes the cursor when it moves over the field,
and alters the background color.

If you want to have the field look more like a label instead of a field, I'm sure you could tweak the style in that third .prop command.
But you can change the value inside this field with code, and be saved on database?
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-28 16:01

Yes.

One reason I propose the change is that AppGini 'readonly' and HTML 'readonly' are not the same thing. AG readonly is more like 'display only'. Having it named the same as the HTML readonly, when it is nothing like it, is confusing.

Here are the differences (for those who stumble on this later.)

AG readonly means the value is displayed as text, not an HTML field. You can change the text display via code; however, changes to it DO NOT save.

HTML readonly displays the field, but you can't edit it. The cursor can enter it, though, and you can tab to it. Except that you can't interactively change it, it confusing still looks a lot like a normal field. Changes to it via code DO get saved.

HTML disabled displays the field, you can't edit it, the cursor won't enter it, tabbing skips it, and the mouse cursor changes when it's over it. Disabled makes it very clear, "This field cannot be modified." Changes to it via code ARE NOT saved. In fact, on save null values are written to the database for any disabled field! Very bad news, unless that's what you intended.

My solution provides the benefits of 'disabled', but without the destructive null writing. In terms of data handling, it is just like readonly. Changes to it via code DO get saved.

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-28 16:10

grimblefritz wrote:Yes.

One reason I propose the change is that AppGini 'readonly' and HTML 'readonly' are not the same thing. AG readonly is more like 'display only'. Having it named the same as the HTML readonly, when it is nothing like it, is confusing.

Here are the differences (for those who stumble on this later.)

AG readonly means the value is displayed as text, not an HTML field. You can change the text display via code; however, changes to it DO NOT save.

HTML readonly displays the field, but you can't edit it. The cursor can enter it, though, and you can tab to it. Except that you can't interactively change it, it confusing still looks a lot like a normal field. Changes to it via code DO get saved.

HTML disabled displays the field, you can't edit it, the cursor won't enter it, tabbing skips it, and the mouse cursor changes when it's over it. Disabled makes it very clear, "This field cannot be modified." Changes to it via code ARE NOT saved. In fact, on save null values are written to the database for any disabled field! Very bad news, unless that's what you intended.

My solution provides the benefits of 'disabled', but without the destructive null writing. In terms of data handling, it is just like readonly. Changes to it via code DO get saved.
Look interesting, but how you do do your persistents changes?

Code: Select all

$j('#descuentoDocumento').prop('readonly', true);
$j('#descuentoDocumento').prop('tabIndex', -1);
$j('#descuentoDocumento').prop('style', 'cursor: not-allowed; background-color: #EEE;');
$j('#descuentoDocumento').mousedown(function(){return false;});
$j('#descuentoDocumento').val('1234');
This works, but don't change the value.
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-28 17:31

Here's the dv.js from one of my projects.

It pulls material table info into the current transaction's record, where it must be saved with the transaction. I'm using an ajax call to get the material info, rather than the AG auto-fill method. If auto-fill would store the values returned, instead of the fkey, I'd just use auto-fill.

Also note that in AppGini, the fields being "disabled" are normal AG fields - that is, not readonly.

Code: Select all

$j(function(){

  // set pseudo-disabled fields

  $j('#type, #description, #unit, #buy_price, #sell_price, #suggested_price').prop('readonly', true);
  $j('#type, #description, #unit, #buy_price, #sell_price, #suggested_price').prop('tabIndex', -1);
  $j('#type, #description, #unit, #buy_price, #sell_price, #suggested_price').prop('style', 'cursor: not-allowed; background-color: #EEE;');
  $j('#type, #description, #unit, #buy_price, #sell_price, #suggested_price').mousedown(function(){return false;});

  // for material changes - fill in type/description/unit
  // and buy/sell/suggested prices fields

  function get_material_info(){
    var id = $j('#material_id').val();
    var qty = $j('#quantity').val();
    if (id == '{empty_value}'){
      $j('#type,#description,#unit,#buy_price,#sell_price,#suggested_value,#amount_paid').val('');
      $j('a[href="#vehicle-info"]').parents('li').hide();
    }else{
      $j.ajax({
        url: 'hooks/ajax.php',
        data: { ax: 'mi', id: id },
        success: function(data){
	  data=data.split('|');
	  if (isNaN(data[3]*qty)){
	    price='';
	  }else{
	    price=data[3]*qty;
	  }
          $j('#type').val(data[0]);
          $j('#description').val(data[1]);
          $j('#unit').val(data[2]);
          $j('#buy_price').val(data[3]);
          $j('#sell_price').val(data[4]);
        }
      });
    }
    $j(qty_amt_change);
    if($j('#unit').val()=='Vehicle'){
      $j('a[href="#vehicle-info"]').parents('li').show();
    }else{
      $j('a[href="#vehicle-info"]').parents('li').hide();
    }
  }

  // deal with changes to quantity and amount paid

  function qty_amt_change(){
    var buy = $j('#buy_price').val();
    var qty = $j('#quantity').val();
    var amt = $j('#amount_paid').val();
    if(isNaN(buy)) buy='';
    if(isNaN(qty)) qty='';
    var suggested = (qty*buy).toFixed(2);
    $j('#suggested_price').val(suggested);
    if(isNaN(amt) || amt=='' || amt<=0) $j('#amount_paid').val(suggested);
    if($j('#amount_paid').val()*1 < suggested) {
      $j('#amount_paid').parents('.form-group').addClass('has-error');
    }else{
      $j('#amount_paid').parents('.form-group').removeClass('has-error');
    }
  }

  // update material details on material changes
  // update suggested price on quantity changes
  // update amount paid on quantity changes

  $j('#material_id-container').on('change', get_material_info);

  $j('#quantity, #amount_paid').on('change', qty_amt_change);

  // initialize the page on first load
  
  $j(get_material_info); // includes call to qty_amt_change()

});
The actual updating of the transaction record does not occur until the record is saved.

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-28 17:43

My code don't change the value. .val() returns the new value, but on screen the value is the same as loaded in database, and not sure why.I see you update with .val(value) too, and I guess it works for you.
/Giuseppe
Professional Outsourcing Services

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: AG App - field display options

Post by grimblefritz » 2016-07-28 21:54

Not sure what to tell you.

Are you using regular AppGini fields, or are they readonly in AppGini? They should NOT be readonly.

Otherwise, you should be able to read their values with .val() and set them with .val(value).

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: AG App - field display options

Post by DevGiu » 2016-07-29 07:24

You are right. I had unset "Read Only" in other similar table but mistake. It works.
/Giuseppe
Professional Outsourcing Services

Post Reply