Field editor in table view

[landinialejandro]

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



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

[fgazza]

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

[Alisson]

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

[landinialejandro]

Thanks

[fgazza]

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

[landinialejandro]

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.

[fgazza]

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 (106.39 KiB) Viewed 18062 times

Immagine2.png (13.27 KiB) Viewed 18062 times

Immagine3.png (18.98 KiB) Viewed 18061 times

[landinialejandro]

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!

[fgazza]

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!

[landinialejandro]

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

[landinialejandro]

Another thing for now can only edit text fields.

[jlarmarange]

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

[landinialejandro]

Thank you! In the next version I am working on, these and other functions will be included.

[landinialejandro]

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

[landinialejandro]

add two new things:

• the callback function is enabled by calling the

  Code: Select all

  tv_callback (result, settings, submitdata)

  function

• can edit empty field

[jmacdougall]

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 ());
});

[landinialejandro]

hi! this file must be placed inside hooks folder,

[jmacdougall]

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

Jeff

[sgrzy01]

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!

[landinialejandro]

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 (77.72 KiB) Viewed 8963 times

I hope it has been useful

best regards

[sgrzy01]

Thank you! Perfect!

[ayussuf]

Very good editor...

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

Thank you very much

[federico]

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

[landinialejandro]

hi!
can you check if exit any problem in console?
for empty cells in think i was fix the problem, let me check.

[federico]

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