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: 104
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: 84
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.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 611
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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 782 times
and get
detailview_result.JPG
detailview_result.JPG (48.95 KiB) Viewed 782 times

User avatar
ronwill
Veteran Member
Posts: 101
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 - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

fgazza
Veteran Member
Posts: 104
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 703 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;

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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: 104
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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: 104
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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: 104
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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 583 times
Olaf

fgazza
Veteran Member
Posts: 104
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.

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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 577 times
Your application:
ec83b.png
ec83b.png (81.33 KiB) Viewed 577 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: 104
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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: 101
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 - AppGini Pro V 5.76 Rev 1058
Gloucestershire, UK

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
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: 104
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

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 298
Joined: 2019-05-21 22:42
Contact:

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

Post by onoehring » 2019-08-14 06:09

Hi Fabiano,

thanks for asking and forwarding the answer to all of us.
Olaf

Post Reply