Appgini Helper - Inline Fields

Please report bugs and any annoyances here. Kindly include all possible details: steps to reproduce, expected result, actual result, screenshots, ... etc.
Post Reply
User avatar
aarlauskas
Veteran Member
Posts: 57
Joined: 2019-04-28 18:03
Location: Medway, UK

Appgini Helper - Inline Fields

Post by aarlauskas » 2020-02-22 23:00

Just playing with Jan's Appgini Helper. I cant get the Inline Fields to work. I maybe just missing the point somewhere, but instead of seeing two fields in one line, they both just disappear completely from detail view. I've copied the code from documentation and created the two fields last_name & first_name as in there just for testing, but they both just goes after code applied on tablename-dv.js I did check the console for errors and got this:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (http://localhost/portal/resources/jquer ... js:3:22901)
at Ha (http://localhost/portal/resources/jquer ... js:3:21075)
at n.fn.init.append (http://localhost/portal/resources/jquer ... js:3:22791)
at n.fn.init.n.fn.<computed> [as appendTo] (http://localhost/portal/resources/jquer ... js:3:24510)
at _0x87fa77._0x5a4d82.inline (http://localhost/portal/hooks/AppGiniHe ... s:6:157421)
at http://localhost/portal/hooks/vehicle_check-dv.js:11:48

Any help?

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-02-23 04:45

Can you please post the code of vehicle_check-dv.js and give more information on the field names you are trying to put inline. A screenshot would also be helpful.

User avatar
aarlauskas
Veteran Member
Posts: 57
Joined: 2019-04-28 18:03
Location: Medway, UK

Re: Appgini Helper - Inline Fields

Post by aarlauskas » 2020-02-23 09:59

Hi Jan, the code is pretty much copy and paste of yours in documentation. All I have done I replaced your field names with mine. It is definitely hits the page some how, as both of the fields that are in the code just disappear from detail view.

// syntax:
// new AppGiniFields( fieldname[] ).inline( label, width[] );

// simple example
// automatic sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");

// example with explicit sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name", [6, 6]);

// long example
var fieldnames = ["Interior_Trim", "Seat_Belts"];
var widths = [6, 6];
var label = "Name";
new AppGiniFields(fieldnames).inline(label, widths);

That's all I have in vehicle_check-dv.js file. Both fields are set as VerChar in Appginni.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-02-23 10:16

// syntax:
// new AppGiniFields( fieldname[] ).inline( label, width[] );

// simple example
// automatic sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");

// example with explicit sizing
new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name", [6, 6]);

// long example
var fieldnames = ["Interior_Trim", "Seat_Belts"];
var widths = [6, 6];
var label = "Name";
new AppGiniFields(fieldnames).inline(label, widths);
If this is your code, if will fail, because you inline your fields (line 6) and then try it again two more times (in lines 9 and 15). This will not work because after the first inline-call, the fields have already been moved to their new location. They are NOT at their original place any more afterwards, so your second and third call will fail.

Please use this...

Code: Select all

new AppGiniFields(["Interior_Trim", "Seat_Belts"]).inline("Name");
...and remove the second and third .inline() function calls.


You only need to call the inline()-function once. There are three examples in the code which you have copied and pasted. Please use only one of them, not all. It is up to you, which variant you like the most. Personally I love efficient short code. Others like more variables for better readability.



Hope this was the only bug!
Best,
Jan

User avatar
aarlauskas
Veteran Member
Posts: 57
Joined: 2019-04-28 18:03
Location: Medway, UK

Re: Appgini Helper - Inline Fields

Post by aarlauskas » 2020-02-23 10:27

Oh Dear :D 8-) Thanks Jan.. The documentations isn't very 'Begginer Friendly' , but glad you are always around to help ;)

User avatar
aarlauskas
Veteran Member
Posts: 57
Joined: 2019-04-28 18:03
Location: Medway, UK

Re: Appgini Helper - Inline Fields

Post by aarlauskas » 2020-02-23 10:38

I mean 'Beginner'.. :D

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-02-23 10:44

aarlauskas wrote:
2020-02-23 10:27
Oh Dear :D 8-) Thanks Jan.. The documentations isn't very 'Begginer Friendly'
Thanks for pointing that out!!! :oops:

Actually I did not expect anyone using those three examples in one file all at the same time without commenting out parts of it :lol:

I'm still learning something new every day!

Anyway: I am going to update the sample code immediately.

Best,
Jan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-02-23 10:54

Done:
https://appgini.bizzworxx.de/products/j ... ne-fields/

chrome_7DhiAYwcbq.png
chrome_7DhiAYwcbq.png (39.13 KiB) Viewed 4837 times
I hope this is better now! If there is anything which I can improve, feel free to contact me.

Best,
Jan

User avatar
aarlauskas
Veteran Member
Posts: 57
Joined: 2019-04-28 18:03
Location: Medway, UK

Re: Appgini Helper - Inline Fields

Post by aarlauskas » 2020-02-23 11:24

Nice one Buddy. Thank You!

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-18 20:48

Jan,

Inline fields working great for me. Thanks

Anyway to add a label to the other fields?

Original
Last Name: _______________________________________________________
First Name:_______________________________________________________

With Inline Fields

Name: ___________________________________________________________ __________________________________________________

My Hope
Last Name:_______________________________________________________ First Name:_________________________________________

Thanks

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-18 21:28

Hi,

have a look, please. I guess this is what you are looking for:

chrome_ShWOpg1qOd.png
chrome_ShWOpg1qOd.png (7.95 KiB) Viewed 3204 times

The columns Street, c/o, Floor, Postcode, City and Country are all inline [12, 12, 12, 3, 9, 12] and the labels are right before the fields.

I have been working on this recently. It's not easy to implement but I'm getting closer. Stay tuned, this may be BETA-function in upcoming April 2020 version of AppGini Helper Javascript Library.

Do you like it?
Take care,
Jan

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-18 21:34

Yes, thanks....

That is what I would like to do....

I'll wait until April, in the meantime can the field name be displayed in the field (greyed out)

Thanks for your response.

Jim

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-18 21:43

You may have a look at the .placeholder()-function:

https://appgini.bizzworxx.de/products/j ... ceholders/

chrome_XOLTXUedhx.png
chrome_XOLTXUedhx.png (14.79 KiB) Viewed 3203 times

Best,
Jan

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-18 21:49

That sir, Solves my problem!!!

Thanks once again!!

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-19 18:03

Anyone see what my placeholder will not work?

Everything else works

new AppGiniField("Contract_Date") .placeholder("Contract Date");
var dv = new AppGiniDetailView();
dv.addGroup("grp_Basic_Information", "Basic Information", ["Name", "Offical_Project_Title", "Contact_Name", "Phone_Office", "Contact_Phone_Cell", "Client_Website", "Email", "Address", "City", "State", "Zip","Location"]);
dv.addGroup("grp_staffing", "Project Information", ["PM", "Project_Type","Status"]);
dv.addGroup("grp_calendar", "Calendar", ["Contract_Date", "StartDate","Date_of_Data_Request","Date_All_Data_Received","EndDate", "Actual_end_date", "Time_Left"]);
dv.addGroup("grp_Project_Documents", "Project Documents", ["Client_Folder", "ESCI_Folder","Contract","Final_SOW","Original_RFP"]);
new AppGiniField("Contract_Date") .placeholder("Contract Date");
new AppGiniField( "Contract_Date" ).toDatepicker();
new AppGiniField( "StartDate" ).toDatepicker();
new AppGiniField( "Date_of_Data_Request" ).toDatepicker();
new AppGiniField( "Date_All_Data_Received" ).toDatepicker();
new AppGiniField( "EndDate" ).toDatepicker();
new AppGiniField( "Actual_end_date" ).toDatepicker();
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
new AppGiniFields(["Date_of_Data_Request", "Date_All_Data_Received"]).inline("Dates for Data")
new AppGiniFields(["EndDate", "Actual_end_date"]).inline("Project End Dates")

Thanks

Jim

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-19 18:10

  1. Are there any error messages in the console tab of your browser's dev-tools?
  2. Can you please remove the .toDatepicker call on that field for testing purposes.
  3. You are executing the .toPlaceholder function twice
  4. Well this will not be the reason, but I've noticed blanks which should be removed
  5. I'd like to recommend chaining technique instead of initializing the same field a couple of times.
Your code

Code: Select all

// ...
new AppGiniField("Contract_Date") .placeholder("Contract Date");
var dv = new AppGiniDetailView();
new AppGiniField("Contract_Date") .placeholder("Contract Date");
new AppGiniField( "Contract_Date" ).toDatepicker();
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
// ...
Chaining

Code: Select all

// ...
var dv = new AppGiniDetailView();

new AppGiniField("Contract_Date")
   .placeholder("Contract Date")
   .toDatepicker();
   
new AppGiniFields(["Contract_Date", "StartDate"]).inline("Project Begin Dates")
// ...

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-19 19:21

I'll try that

Thanks

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-19 20:26

Still no error, but no place holder either??????

new AppGiniField( "StartDate" )
.placeholder("Start Date")
.toDatepicker();
new AppGiniField( "EndDate" )
. placeholder("End Date")
.toDatepicker();
new AppGiniFields(["StartDate", "EndDate"]).inline("Start Date - Due Date")

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-19 21:50

Sir, you have changed your settings and you are posting a different scenario than before. That makes it hard to help you on a specific problem.

Your first post was about "Contract_Date" field and now you have posted completely different code with fields "Start Date" and "EndDate". Also still (or again) you are calling .toDatepicker(). I have asked NOT to call this for testing purposes.

We have to narrow down and eliminate possible errors.

Are you able to just test...

Code: Select all

new AppGiniField("Contract_Date").placeholder("Start Date");
... and post your code and the result. Nothing else, just that line of code in hooks/YOURTABLENAME-dv.js. No other code. And please ensure spelling of Contract_Date and that Contract_Date is a varchar or datetime field. If this is for example a date-field, there is no placeholder functionality.

Sorry, I really want to help you but I need exact information.
Best,
Jan

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-19 22:21

Sorry,....

I do appreciate your help.

This from my project.dv.js file

new AppGiniField("Contract_Date").placeholder("Start Date");

No place holder on the page.

Just FYI
Yesterday I inserted the .placeholder function on another page and it worked fine, in fact, when I deleted the code it kept working!

Thanks for all your help....

Jim

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-20 07:01

jangle wrote:
2020-03-19 22:21
This from my project.dv.js file
Please name the file

Code: Select all

project-dv.js
not

Code: Select all

project.dv.js

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-20 13:58

Sorry,

The name was correct, (project-dv.js)

I typed it wrong in the message.

Contents:

new AppGiniField("Contract_Date").placeholder("Start Date");

No placeholder shown.

Thanks!!

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 465
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Appgini Helper - Inline Fields

Post by jsetzer » 2020-03-20 15:33

Silly question, I'm sorry, just to be 100% sure:
Are you reloading the browser page without caching? I had to learn that some developers are just hitting F5 or just clicking the refresh button of their browser and don't see the expected results. Please always clear cache after you have modified CSS of Javascript files to avoid old and outdated code in your broser. There are keyboard shortcuts for all browsers. I recommend getting used to this. See also: https://appgini.bizzworxx.de/support/troubleshooting/

Please note
  • There is the .placeholder() function
    This will work for "normal" input fields and for datetime fields (which actually ARE inputs).
    It will not work for other datatypes like radio buttons or checkboxes or embedded YouTube Videos, obviously, or many other controls which do not support placeholder functionality.

    Apart from this
  • There is the .inline() function which moves various controls into a block of single or multiple lines. During this, the labels of each individual control will be removed. And if this control supports placeholders, the label's text will be taken as placeholder automatically. This also applies to text/number inputs and datetime, perhaps a few more.
This means, when you are calling the inline()-function on a field, the placeholder will be automatically set IF POSSIBLE.

If this does not help, can you please tell us which datatype Contract_Date is. It should be one of the following datatypes which support placeholders:
  • varchar
  • numeric types
  • datetime
  • all text types, I'm not 100% sure about text datatype with Richtext option

jangle
Posts: 18
Joined: 2020-01-18 17:41

Re: Appgini Helper - Inline Fields

Post by jangle » 2020-03-20 16:17

As always Thanks

I will try these things....

Jim

Post Reply