Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Homer J. on Oct 10, 2009 02:46
open dhtmlx forum
Customer fORM

Hallo DHX Team,

I gotta question about customizing my Details form at your product SCHEDULER:
I read the tuturial about customizing forms and could recreate it of course, but for sure i have not get it in depth what happend...

Could you try to explain me the functions set get and focus?

I mean, if i add another field to the form, i have to add this one to the events.php at the end of the "render_table" function, right?

Also i have to mention it in the my_Editor render fucntion (the one with (sns)...) like
<div>Occupation</div><input type='text' style='width:150px;'>
right?

But now it stopps. Where are these NODES for? Haven't find a clue in Documents or KBase.
            set_value:function(node,value,ev){
                node.childNodes[1].value=value||"";
                node.childNodes[4].value=ev.occupation||"";
            },
            get_value:function(node,ev){
                ev.occupation= node.childNodes[4].value;
                return node.childNodes[1].value;
            }
where are the Numbers from? How could i add more fields and how i have to call them? like above OCCUPATION?

So sorry taht i have no clue, but want to make it... I like thisfree scheduler :)


Another question is,if there is any Example fo radduing a checkbox to form.
If there is anywhere an example of another Hand-Made Form than the one in the documents, i could try to get it out on my own :-))


Thanks, Homer
Answer posted by Stanislav (support) on Oct 12, 2009 06:30
Each time when form is show, for each section set_value method is called, its purpose - fill data in related columns. 
After filling data , for the section  which has focus = true , focus method is called, its purpose - set initial focus to the form ( it is expected that only one section has such configuration option ) 
When user finish edit operation, and Save button is pressed - for each section in the form get_value method is called, its purpose - take data from the form and save in related event object. 

>>to add this one to the events.php at the end of the "render_table" function, right? 
If you want to load it from DB and save changes back to DB - right , it need to be added to the list of fields in render_table or render_sql command. 

>>Where are these NODES for?
The node gives you the pointer to the top html element described in the render event. 
In your case node will point to the <div>Occupation</div>

So you can use 

set_value:function(node,value,ev){
  node.nextSibling.value=value||"";  
},
get_value:function(node,ev){
   return node.nextSibling.value; 
}

>>How could i add more fields and how i have to call them?
Do you want to add many unique sections or use the same section for many fields?
Answer posted by Homer J. on Oct 12, 2009 06:54
I got two Sections, like in the custom_form example and renamed the drop-down-box and gave her new values... works fine!
Bu tnow i want to use a few textfields in the first section. And yes, they should be synced with Database.

When i get it right i have to write the field in the render_table in the order they approach in my form?
Have not get the thing with the Nodes exactly... so sorry!
For example i use Forname, Name and occupation i write the render_table like ...,forname,name,occupation);
and how to change the set_ get_ and focus_ functions correctly?
Is FORNAME then [4], NAME [5] and OCCUPATION like [6] ???
Or have i got it totally wrong? :)

I would try to get it on my own, but nowhere find an example with three or more datafields :/ The example in the SAMPLE Section just uses TEXT for eventtext,m but i killed this one in database :)


at the moment i use something like this (totally worng :( ):

            set_value:function(node,value,ev){
                node.childNodes[1].value=value||"";
                node.childNodes[4].value=ev.forname||"";
                node.childNodes[5].value=ev.name||"";
                node.childNodes[6].value=ev.occupation||"";
            },
            get_value:function(node,ev){
                ev.forname = node.childNodes[4].value;
                ev.name = node.childNodes[5].value;
                ev.occupation = node.childNodes[6].value;
               return node.childNodes[1].value;
            },
            focus:function(node){
                var a=node.childNodes[1]; a.select(); a.focus();
            }


For sure there is not yet a checkbox :)

Answer posted by Homer J. on Oct 13, 2009 03:07
Hello again,

I am really frustrated right now :(
I spend the last 3 Hours to get my form working, but it seems like i am unable to, or i got something wrong..
I think it should be sooo easy...
I will start all-over again and try to descripe in detail what i want to do (perhaps i can't do it with the form??).
I want to fill four fields, in German they are called Vorname (Forname), Nachname (Name), Telefon (Phonenumber) and Bemerkung (Comment).
There is ione more field called Art (means soemthing like "what kind of"). The "art" field is filled through the selectbox perfectly, bur don't want a single section for the four field above, so i want to put them all in one section (the first one)... I think it is easy for you to get my point when you see my code.

1.] I use a Database (SQL)
$scheduler->render_table("events","event_id","start_date,end_date,nachname,vorname,telefon,art,bemerkung");

2.] I use two Sections
scheduler.config.lightbox.sections=[
    { name:"description", height:80, map_to:"text", type:"my_editor" , focus:true},
    { name:"art", height:21, type:"select", map_to:"art", options:[
        {key:"sprechstunde", label:"Sprechstunde"},
        {key:"eeg", label:"EEG"},
        {key:"nlg", label:"NLG"},
        {key:"uU", label:"u.U."},
        {key:"gt", label:"GT"},
        {key:"mmpi", label:"MMPI"},
        {key:"rehacom", label:"RehaCom"},
        {key:"duplex", label:"Duplex"},
        {key:"pt", label:"PT"}
    ]},
    { name:"time", height:72, type:"time", map_to:"auto"}

]


3.] My my_editor looks like this
scheduler.form_blocks["my_editor"]={
    render:function(sns){
        return "<div class='dhx_cal_ltext' style='height:60px;'><div>Nachname</div><input type='text'><br/><div>Vorname</div><input type='text'><br/><div>Telefon</div><input type='text'><br/><div>Bemerkung</div><input type='text'>";
    }


4.] I use a custum view to overwrite the
scheduler.templates.event_text=function(start,end,event){
    return "<nobr><font style='font-size: 10pt; line-height: 10px;'>Patient: "+event.vorname+" "+event.nachname+"</b>_________ "+"Telefon: <b>"+event.telefon+"</b>_________ "+"Art: <b>"+event.art+"</b></font></nobr>";
        }



O.K., i missed some information?
I mean, my set_value/get_value/focus-Functions are not working... I can't get the point of the Nodes and Sibblings :-(

Could somebody help me out?
Will help to find all errors, just ask me for more informations....

Thanks in advance,
Homer
Answer posted by Homer J. on Oct 14, 2009 07:46
Hi again,

i actually asked a friend who's tough in coding, but he was not able to help me out with the little form :-/
Could you help me out Support Team? :(

Seems like i am lost right now at this point of developing :/
Answer posted by Stanislav (support) on Oct 14, 2009 10:43
Partially working sample is attached ( it doesn't have a server side, but the code which you have mention above must work ) 

Changes 
render
render method provides incorrect HTML , top level div tag is not closed - was fixed
hardcoded height was changed to the settings from config

set_value
first line locates all inputs in your template, other places related values in inputs
set_value:function(node,value,ev){
   var inps = node.getElementsByTagName("INPUT");
   inps[0].value=ev.nachname;
   inps[1].value=ev.vorname;
   inps[2].value=ev.telefon;
   inps[3].value=ev.bemerkung;
}


get_value
first line locates all inputs in your template, other moves values from inputs to event object
get_value:function(node,ev){
   var inps = node.getElementsByTagName("INPUT");
   ev.nachname= inps[0].value;
   ev.vorname= inps[1].value;
   ev.telefon= inps[2].value;
   ev.bemerkung= inps[3].value;
}

focus
just the same, locates the inputs and move focus to the first
focus:function(node){
   var inps = node.getElementsByTagName("INPUT");
   inps[0].focus();
}



Attachments (1)
Answer posted by Home J. on Oct 15, 2009 00:50
Hello to Russia,

I am totally happy about your detailed answer! Very, very, very thank you!
After testing and workingwith your code i made it :-)

But there are just two little Problems after your Implementation:
1.] When i will add an event, every field is filed with "undefined", how to make their value clear like before?
2.] When i click on add event my scheduler.templates.event_text=function(start,end,event) works fine, and gets filled by the values i just added.
Also when i go into detail view everything is at the right place.
But when i reload the whole site, i get an "undefined" for the value of nachname. Even if i go into detail mode there is undefined in the field of nachname.
Every other field is filled correctly.

Checked the log and get the following:
====================================
Log started, 15/10/2009 07:10:45
====================================

DataProcessor object initialized
128_id => 128
128_start_date => 2009-10-15 09:15
128_end_date => 2009-10-15 10:15
128_text => undefined
128_vorname => Homer
128_telefon => 02203 9974731851
128_art => mmpi
128_bemerkung => Test Content
128_nachname =>
Jousuf
128_!nativeeditor_status => updated
ids => 128

Row data [128]
id => 128
start_date => 2009-10-15 09:15
end_date => 2009-10-15 10:15
nachname => Jousuf
vorname => Homer
telefon => 02203 99741851
art => mmpi
bemerkung => Test Content
!nativeeditor_status => updated

UPDATE events SET start_date='2009-10-15 09:15',end_date='2009-10-15 10:15',nachname='Jousuf',vorname='Homer',telefon='02203 99741851',art='mmpi',bemerkung='
Test Content' WHERE event_id='128'

Edit operation finished
0 => action:updated; sid:128; tid:128;

Done in 0.0086979866027832s


Any idead? I have an idea and underlined the thing i meantioned...
Answer posted by Stanislav (support) on Oct 15, 2009 04:53
>>1.] When i will add an event, every field is filed with "undefined", how to make their value clear like before?
a) replace 
     inps[0].value=ev.nachname;
with
     inps[0].value=ev.nachname||"";
and same for other inputs. 

or 

b) you can use onEventCreated handler to set default values for properties of new event

>>Even if i go into detail mode there is undefined in the field of nachname.
Problem is in loading code. The scheduler expects to have 3 mandatory fields : start date, end date, text and any extra fields after it. In your case you  are providing only two mandatory fields ( you have not any field for the "text"  )
With such config
          $scheduler->render_table("events","event_id","start_date,end_date,nachname,vorname,telefon,art,bemerkung");
third field "nachname" will be mapped to the "ev.text" , not to the ev.nachname
It possible to change server side config to provide correct mapping but it will require extra field in DB or some custom coding. 
More simple approach is to tweak the client side mapping. 

scheduler.attachEvent("onEventLoading",function(ev){ ev.nachname = ev.text; }); 
Answer posted by Homer J. on Oct 15, 2009 04:09
So i thought in the right way by getting that the "text"-field made the problem.
OK now i got that it is filled for third field, and i can just add a database coloum called text and let it empty all the time, no problem i think.
The second way seems to be more easy, but i am not sure, if i get problem later when i perhaps forget this cirsumstance or something :)

Dear support, when i read your replys i can get the points where you are writing about and learn form it, very much thank you Guys (and girls?) ;)

Best wishes,
Homer
Answer posted by Benjamin on Oct 16, 2009 07:14
Hello all of you,

i am a quite follower of thsi discussion and learned a few things out of it... Perhaps we should change contacts Homer? Seems like we have the same problems in coding and understadning :)
I finally finsihed my project but still looking for some better handling, so i was interessted in the checkbox point:

Another question is,if there is any Example fo radduing a checkbox to form.
If there is anywhere an example of another Hand-Made Form than the one in the documents, i could try to get it out on my own :-))


(oh now the whole area turned into orange ?!)
So if it is allowed, may i ask you for the possibility of adding a checkbox into the form?
I mean, of course i can add one in HTML, but is the way to fill it exactly the same like with every normal textfield or area?
Answer posted by Steve MC on Oct 20, 2009 07:15
Hey again,

after helping me out with the lightbox stuff i found this topic.
i got no problems with adding fields, but also can't build up a checkbox into it...
What is so special with it?

Any possibility to workaround for me?
Answer posted by Support on Oct 22, 2009 10:16
The sample is attached. 
Actually it can be added in the same way as any other control through custom "form block"
Attachments (1)