insert a text at the top of the detailed view of a table

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

insert a text at the top of the detailed view of a table

Post by fgazza » 2019-07-26 22:25

Hi everyone. I would like to insert a text (possibly formatted in html) in the upper part of the detailed view of a table to provide some instructions to those who are about to complete it.
How can I work with the hook file?
Thank you!
Fabiano

sjohn
Veteran Member
Posts: 86
Joined: 2018-05-23 09:32

Re: insert a text at the top of the detailed view of a table

Post by sjohn » 2019-07-27 05:44

I guess there are more ways to achieve this.
A way that requires no code in hooks is :
Make a dummy field ( instructions)for the detail view. I suuggest to put the field in top.
In the description for this field ( in the AppGini app ) you put an iframe. The source for the iframe should be the html-page where you have the instructions.
**important** You have to write the iframe-definition in one line - no line breaks.

This will do that you in detail view will have a field : Instructions and to this field you will have the information-icon.
When user clicks on the information icon, then the window ( as specified in the iframe ) with the instructions will open. Clicking on the icon again the window will close. You can have the description be as long as you want. If the length is higher than the iframe definition, then the user will automatic have the scrollbar.

This will do that not much space is used when the information is not needed/shown ( just a single field )- when the user needs instructions it will be there in the same view and taken up the space you have specified in the iframe - and again - when closed you have the detail view with not much space taken up by the single dummy-field.

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: insert a text at the top of the detailed view of a table

Post by pbottcher » 2019-07-27 09:59

Hi,

you can use also just the detail view title to do this. Put you text in
detailview_appgini.JPG
detailview_appgini.JPG (13.94 KiB) Viewed 9792 times
and get
detailview_result.JPG
detailview_result.JPG (48.95 KiB) Viewed 9792 times
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: insert a text at the top of the detailed view of a table

Post by ronwill » 2019-07-31 15:43

For general header notes on a table or detailed view page or both, I normally insert my notes in the page hooks file, i.e.

Code: Select all

			
case 'tableview+detailview':
			
	$header='<%%HEADER%%>
	<div class="col-lg-offset-0 col-lg-12" >
	<div class="alert alert-danger">
	<h4>Your header note in here etc.
	</div></div>';
				
	break;

Use alerts or <div class="well well-sm"> and whatever html you want to emphasis your header note (inclusive image etc.)
Cheers, Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

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

Re: insert a text at the top of the detailed view of a table --> annoying problem: a "send" button appears

Post by fgazza » 2019-08-04 18:24

annoying problem: a "send" button appears
Hi and thanks for the suggestions.
I tried to insert the following code in the hook file to create an expandable text with the instructions for compiling the table, but as you can see from the image a strange thing happens: when I expand the text a "send" button appears. Where did I go wrong? how can i remove this button?
Thank you!
Fabiano
Immagine 001.png
Immagine 001.png (73.11 KiB) Viewed 9713 times
This is the code I place in hook file:

case 'detailview':
$header='<%%HEADER%%>
<div class="col-lg-offset-0 col-lg-12" >
<div class="alert alert-danger">
<style>
#more {display: none;}
</style>
<h4>Guida alla compilazione.<p>Questa scheda è uno strumento per rilevare in maniera uniforme tra tutti i servizi coinvolti nel progetto <span id="dots">...</span><span id="more">“Sulla Buona Strada” l’impatto sulle capacità genitoriali delle azioni messe in atto, così come dichiarato in risposta al bando dell’impresa sociale “Con i bambini”. Essa vuole essere sia uno strumento utile per i ricercatori che monitorano il progetto, che uno strumento nelle mani di chi lavora tutti i giorni a contatto con le famiglie.<br>
<b>Come si configura.</b> La scheda nasce dalla necessità di leggere le capacità genitoriali attraverso una chiave interpretativa strettamente pedagogica, perciò diversa e complementare alle chiavi di lettura psicologiche e giuridiche dalle quali si è preso spunto per configurarla.<br>
Essa è suddivisa in quattro aree di riferimento per descrivere le capacità genitoriali: a) accudimento; b) riconoscimento; c) tutela; d) supporto sociale e capacità organizzativa. Ciascuna di esse è stata suddivisa in specifici aspetti (items).<br>
<b>Come utilizzarla.</b> La scheda presuppone che il compilatore possa avere una conoscenza più o meno approfondita dei familiari, a seconda del servizio cui afferisce. Non tutti i servizi, infatti, potranno dare conto delle diverse aree indicate, perché non tutti interagiscono in maniera analoga con le famiglie e i minori. È dunque richiesto a chi compila di soffermarsi sulle aree e sugli items che considera rilevabili attraverso la propria azione specifica e di indicare quanto, nel nucleo familiare considerato, esse siano effettivamente visibili e con quale intensità (dove 1 corrisponde a “non presente” e 5 a “molto presente”).
La rilevazione delle capacità genitoriali può avvenire sia attraverso contatti diretti con la famiglia, durante le diverse attività svolte (colloqui, osservazioni...), sia attraverso strumenti già esistenti che il servizio ha a disposizione. Sempre al fine di uniformare la possibilità di rilevare le capacità genitoriali, è richiesto a ciascuno dei partner di caricare sulla piattaforma on line condivisa e afferente al progetto, tutti quei materiali (questionari, griglie di osservazione, schede in ingresso...) che fungono a questo scopo.
</span></p>
<button onclick="myFunction()" id="myBtn">Continua...</button>

<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Continua...";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Comprimi queste istruzioni";
moreText.style.display = "inline";
}
}
</script>
</div></div>';
break;

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-05 15:07

Hi,

I am not sure which button in your screenshot you mean, but your code does contain a button ... so there is supposed to be one.

Code: Select all

<button onclick="myFunction()" id="myBtn">Continua...</button>
Maybe you might add an ID to your button and hide other buttons in that area using CSS?

Olaf

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

Re: insert a text at the top of the detailed view of a table

Post by fgazza » 2019-08-06 08:16

Hi in the image above you can see an "invia" (=send) button that appear below the "administrative area" button in the image. I don't know where this button come from and how to remove it.
Thanks!
Fabiano

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-06 11:30

Hi Fabiano,

what happens, when you do nothing (see code) to the header? Is the invia-button still there?

Code: Select all

case 'detailview':
$header='<%%HEADER%%>';
break;
Olaf

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

Re: insert a text at the top of the detailed view of a table

Post by fgazza » 2019-08-09 09:06

Hi Olaf!
in this case the "invia" button disappear!
Hope you will help me!
Thamks!
Fabiano

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-09 10:04

Hi Fabiano,

could you please repost the exact header code? I can not find "Compiri la guida" in your code above, so there seems to be a difference to your actual code. That might be a long shot, but maybe there is some old stuff creating that button.

If you take a look at the source code in your browser, when the page is displayed: Can you find the "invia" button?

What happens, if you add your code in the developer console to your page. Does that button still show up?

Olaf

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

Re: insert a text at the top of the detailed view of a table

Post by fgazza » 2019-08-09 15:07

Hi and thank you for your help.

I made some changes to the code.

I put a copy of the code that i want to see in header of DV page at this address:
www.sullabuonastrada.org/headertry.html

If i search "invia" in the source code in my browser dont't find nothing

I dont'know how and where put code in developer console.

Note that the "invia" button take the name "invia query" if i use EDGE browser and it appear or disappear if i zoom the page in certain modes or if i restrict the browser window!!!

Thanks!

fabiano

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-10 05:55

Hi Fabio,

in your test-page I can not see any problem for my PC (Windows). Neither in Vivaldi (chromium based) nor edge can some invia be seen.
So my question at this time is: That strange behaviour you describe (Edge, zoomin): does it occur in your TEST-page (as well) or only your original page?
Zwischenablage01.png
Zwischenablage01.png (14.45 KiB) Viewed 9593 times
Olaf

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

Re: insert a text at the top of the detailed view of a table

Post by fgazza » 2019-08-10 07:23

hello Olaf and hello everyone!
I transferred the code to a page on the site visible to everyone. In this way it is possible to better analyze the problem I encounter.
the address is http://sullabuonastrada.org/governance/ ... i_view.php
from here, clicking on a record, you see the header that I entered and clicking on the "Guida alla compilazione" (="compilation guide") button you see that the text expands and a mysterious "invia" (="send") button appears next to the expanded text.
I hope that thanks to you you will find a solution to this annoying and incomprehensible problem.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-10 07:29

Hi Fabiano,

thank you. Now I (unfortunately) also see that button. I will check it out in more detail and reply again.
Olaf

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-10 07:49

Hi Fabiano,

I compared your generated code to an application I created.
My application:
ec83.png
ec83.png (62.24 KiB) Viewed 9587 times
Your application:
ec83b.png
ec83b.png (81.33 KiB) Viewed 9587 times
As we can see, that button seems to be some button from AppGini itself. Unfortunately it's named EnterAction so it seems to have some universal function.
Explanation
As we can not see that button anyways , maybe add some CSS to your code to hide that button when your text is displayed.
By the way: we can not see that button because it is places TOP: -250 - so above the screen.
<input id="EnterAction" type="submit" style="position: absolute; left: 0px; top: -250px;" onclick="return enterAction();">
When you show your message now, that text is placed ABOVE that button, so the button position is calculated from the position of your text - which moves the button in sight now.
Suggested solution
Something like this (not tested):

Code: Select all

<style>
    input#EnterAction {top: -9999 !important;}
</style>
Of course you should add this line to your already existing CSS:

Code: Select all

<style>
#more {display: none;}
    input#EnterAction {top: -9999 !important;}
</style>
Or actually hide the button completely:

Code: Select all

<style>
#more {display: none;}
    input#EnterAction {visibility: hidden !important;}
</style>
This should move the button way up and hide it again.

Does it work?
Olaf

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

Re: insert a text at the top of the detailed view of a table

Post by fgazza » 2019-08-10 08:04

You're great Olaf! Thank you! I applied the code
input # EnterAction {visibility: hidden! important;}
(it seemed more effective to hide the button and I didn't try the other two codes you suggested).
With this code, that damn button has disappeared (and it doesn't even appear in the edge or zooming in the page or reducing the browser window !!!)
THANKS !!!
Fabiano

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-10 08:07

Hi Fabiano,

thanks for your feedback.
Please make sure, that other stuff in your application works. The button might be needed for something else.

I also liked your idea to place informational text on the page the way you did. I suggest, you post your (shortened) code or a link to this thread in the Tip & Tricks section ( viewforum.php?f=4 ) ?

Olaf

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: insert a text at the top of the detailed view of a table

Post by ronwill » 2019-08-12 23:54

Solution concerning the submit button:
viewtopic.php?f=11&t=1489#p3835
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: insert a text at the top of the detailed view of a table

Post by onoehring » 2019-08-13 07:15

Hi Ron,

thanks for the link. Isn't the solution of simply hiding the button using CSS somehow to be preferred? This way the user interacts with his own code only, not needing to touch any AppGini generated code (datalist.php).

Olaf

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

strange "send query" button appear inserting a text at the top of the detailed view of a table

Post by fgazza » 2019-08-13 19:26

Hi everyone,
I asked Ahmed to answer this question about the "send" or "send query" button (i see "send" in google chrome and "send query" in microsoft edge):
I had to add the code input # EnterAction {visibility: hidden!
important;} to get rid of a mysterious "send" button that appeared in the header (more information at
viewtopic.php?f=7&t=3153)
So my question is hiding the #EnterAction component is sure that all other stuff in my application works? or button might not be hidden for something else?
Ahmed (whom I thank!) Replied:
"That hidden submit button is necessary for some usability enhancements in the table view. Hiding it using CSS in order for your custom code to work is fine and won’t break anything (as long as it’s hidden but not removed)."
Thanks to Ahmed and I hope this information is useful to everyone.
Regards!
Fabiano


pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: insert a text at the top of the detailed view of a table

Post by pfrumkin » 2021-01-02 23:36

Kudos Olaf, Fabiano, thank you very much!

My context is a little different, I added a style section in the footer-extras.php to display some custom logos. All of the sudden I get a Submit Query button! I just added your little code snippet in the same footer-extras file and viola, no more button.

I agree with you totally about adjusting the style is a better solution than the recommendation in viewtopic.php?f=11&t=1489#p3835 to tweak the datalist.php. That is not sustainable.

~Paul

Post Reply