Field editor in table view

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Field editor in table view

Post by landinialejandro » 2020-02-15 17:56

Field editor in table view

Hello in this oportunity want to leave for your programs an application that will allow you, in the tables view, to quickly edit the fields.

Updating this information via ajax.

On the server side it has all the security that appgini offers with respect to the user, executing the hooks before updating and after updating, it also records the user's update.

Install

download from github repository:

https://github.com/myappgini/tvedit

Setup

First of all you have to register the js libraries for them to run.
Find and edit the

Code: Select all

extras-header.php
file inside the hooks folder.
Add the following two command lines:

Code: Select all

<script  src = "<?php echo PREPEND_PATH;?>LTE/plugins/jquery-jeditable/jquery.jeditable.js"></script>
    <script  src = "<?php echo PREPEND_PATH;?>LTE/tvedit/tv.edit.js"></script>
To be activated within the table view you need you must write within the table tablename-tv.js (you must create a new one if it is not found) the following command lines:

Code: Select all

$j(function () {
        tv_editlets (AppGini.currentTableName ());
    });
just comment on the previous line so that the application is deactivated.

Soon I will try to make it work with a plugin, to avoid having to write some code.

This application is generated with appgini's own code and will be released by jquery_jeditable

which is free to use.

The same can be found here:

https://github.com/NicolasCARPi/jquery_jeditable/

Screenshot

Image

The work is provided “as is”. You may not hold the author liable.

Please, if you think there is an error, do not stop commenting, as well as if you liked it. Also if they have any suggestions

Thanks a lot!

I hope you enjoy it
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: Field editor in table view

Post by fgazza » 2020-02-16 16:55

Hi
thank you for your work!
I'm waitingo for your very useful plugin!
Thanks!
Fabiano

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

Re: Field editor in table view

Post by Alisson » 2020-02-16 18:41

Great job Alejandro, I've been waiting for this for a long time.

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-18 16:17

Thanks
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: Field editor in table view

Post by fgazza » 2020-02-21 11:52

Hello. I tried to reproduce the tutorial to be able to edit the fields in the table view but the tool does not work. It seems that the script is not called from my code.
Maybe I didn't put it in the right folder? I put the TVE folder in the HOOKS folder. Do I have to put it in the root? Or where? THANK YOU!
Fabiano

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-21 17:37

hi! this files will be in root whit yours especifc path.
<script src = "<?php echo PREPEND_PATH;?>LTE/plugins/jquery-jeditable/jquery.jeditable.js"></script>
<script src = "<?php echo PREPEND_PATH;?>LTE/tvedit/tv.edit.js"></script>
if you put in other folder need to changue the above code.
check y your brouser if the library is loaded.
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: Field editor in table view

Post by fgazza » 2020-02-22 06:44

Thanks for your directions.
OK! By putting the LTE folder in the root folder things have improved but there is still something wrong.
In the pictures you can see the current result.
As you can see the icons to save or cancel the changes are incomplete and when saving I see an error. Also in edit mode I don't see the datepicker and the square to set the checkbox as checked or unchecked
Can you help me understand what I'm wrong?
(I use the google chrome browser)
THANK YOU!
Immagine1.png
Immagine1.png (106.39 KiB) Viewed 19838 times
Immagine2.png
Immagine2.png (13.27 KiB) Viewed 19838 times
Immagine3.png
Immagine3.png (18.98 KiB) Viewed 19837 times

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-22 19:58

Hi, I'm glad you were able to make it work. For the icons I use fontawasome, so you will also need to load the pound of FA, otherwise you can continue using Glyphicon by changing the following lines of code in tv.edit.js.

look in line 28 <i class="fa fa-edit"> and replace with <i class="glyphicon glyphicon-new-window"> or the icon you want.

do something similar on lines 11 and 13 by changing the icons to glyphicon icons of your choice, such as glyphicon glyphicon-ok-circle and glyphicon glyphicon-remove-circle

After recording you must refresh the screen of the don F5 navigation.

altrimente fame sapere, parlo anche italiano!
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: Field editor in table view

Post by fgazza » 2020-02-22 21:06

Ok! Grazie mille!
I will try to apply your suggestion and i wiill let you know the results!

But I'm a little worried about two other problems (as you can see from my previous screenshots)
1) my changes are not saved and an error appears
2) when I try to edit the checkbox fields, an editable checkbox does not appear and when I try to edit a date field, the datepicker does not appear.

I would be grateful if you could give me some indication to understand where I'm wrong!

Thank you!

Ma sono un po' preoccupato per altri due problemi (come puoi vedere dai miei precedenti screenshot)
1) le mie modifiche non vengono salvate e appare un'errore
2) quando tento di modificare i campi checkbox non mi appaie un checkbox modificabile e quando cerco di editare un campo data non mi appare il datepicker.

Ti sarei grato se potessi darmi qualche indicazione per capire dove sbaglio!

Grazie!

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-22 23:21

unfortunately this plugin works with the latest version of appgini, the previous version differs a bit in the html code, so it is necessary to adjust the file tv.edit.js the following code online 17:
$j(this) .closest ('tr'). attr ('data-id');
change for:
$get_id (this);

You should also add the following to the end of the file:

right after the add_buttons function

$get_id = function (e) {
id = $j(e) .closest ('tr'). attr ('data-id');
if (!id) {
s = $j(e) .closest ('td'). attr ('id'). split ("-");
id = s[2];
}
return id;
};

I have not tried it but it can work.
tell me later
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-22 23:29

Another thing for now can only edit text fields.
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

jlarmarange
Posts: 16
Joined: 2019-02-21 19:03

Re: Field editor in table view

Post by jlarmarange » 2020-02-25 18:21

This is a great idea. Thank you very much!!!

Some remarks:

- it would be nice to be able to indicate which fields could be edit directly in the table and wich fields cannot (for example computed field)
- the best would be to be able to manage select, multiselect, dates and checkboxes as well
- when numbers are displayed in a specific format (e.g. "12'078.14$") the user is invited to modify the formatted version of the number instead of the unformatted value
- being able to active such functionality in children table view displayed below the parent detail view would be a killing feature
- when changing a field, it could be relevant to update the overall row due to computed fields

Such functionalities would be so relevant for Appgini

Thanks again for your work

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-02-27 20:44

Thank you! In the next version I am working on, these and other functions will be included.
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-08-08 22:31

Hi, chek the update on github. Full readme in the site.

https://github.com/myappgini/tvedit

Updates
08/08/20
  • It adds the possibility of deactivating the fields in the table that you do not want to edit online.
  • Update jeditable library.
  • Changue de folder control name LTE to LAT
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-08-08 23:51

add two new things: :mrgreen:
  • the callback function is enabled by calling the

    Code: Select all

    tv_callback (result, settings, submitdata)
    function
  • can edit empty field
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

jmacdougall
Posts: 26
Joined: 2015-11-02 01:22

Re: Field editor in table view

Post by jmacdougall » 2020-11-23 00:15

Where exactly is the file located to make this edit? Sorry, I think I am overlooking this.

To be activated within the table view you need you must write within the table tablename-tv.js (you must create a new one if it is not found) the following command lines:
CODE: SELECT ALL

$j(function () {
tv_editlets (AppGini.currentTableName ());
});
Jeff MacDougall

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2020-11-23 19:07

hi! this file must be placed inside hooks folder,
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

jmacdougall
Posts: 26
Joined: 2015-11-02 01:22

Re: Field editor in table view

Post by jmacdougall » 2020-11-24 16:15

Thank you. Will there be any ability soon to edit dropdowns inline on table view?

Jeff
Jeff MacDougall

sgrzy01
Posts: 16
Joined: 2016-07-25 20:04

Re: Field editor in table view

Post by sgrzy01 » 2021-01-12 20:18

Thank you so much for this... just what I needed.

Can you help me find where you define the input box width when editing? I'd like to make the input box wider. The txt I'm editing is in a 300px wide column and I have room.

Thanks!

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2021-01-12 22:00

hi! thanks.

Just edit the file tv.edit.js, add the property width in editable options, like in image attach. The value is in pixeles.
change width property.png
change width property.png (77.72 KiB) Viewed 10739 times
I hope it has been useful

best regards
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

sgrzy01
Posts: 16
Joined: 2016-07-25 20:04

Re: Field editor in table view

Post by sgrzy01 » 2021-01-13 17:39

Thank you! Perfect!

ayussuf
Veteran Member
Posts: 39
Joined: 2021-01-20 17:15

Re: Field editor in table view

Post by ayussuf » 2021-01-23 16:36

Very good editor...

I've been searching for it for a long time.

Thank you very much
AppGini 5.92 - Upgraded to 5.94

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

Re: Field editor in table view

Post by federico » 2021-06-13 16:07

thank you very much! It's very nice!
The plugin works but it doesn't save the edited text when I click on green button. What can I do?
I cannot edit empty records (cells)
The edit button to open the details disapears

User avatar
landinialejandro
AppGini Super Hero
AppGini Super Hero
Posts: 126
Joined: 2016-03-06 00:59
Location: Argentina
Contact:

Re: Field editor in table view

Post by landinialejandro » 2021-06-14 14:43

hi!
can you check if exit any problem in console?
for empty cells in think i was fix the problem, let me check.
Alejandro.
AppGini 5.98 - Linux OpenSuse Tumblewweed.

Some of my posts that may interest you:
:arrow: Landini Admin Template: Template for Appgini like AdminLTE
:arrow: Profile image plugin: add and changue image user profile
:arrow: Field editor in table view: Configurable fast edit fields in TV
:idea: my personal page

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

Re: Field editor in table view

Post by federico » 2021-06-15 14:58

hi
"can you check if exit any problem in console?" how can I do it? :-(

Post Reply