Can I make a dynamic popup?

Topics related to AppGini plugins/add-ons go here.
Post Reply
kmullins
Posts: 14
Joined: 2023-12-10 16:44
Location: Seattle, WA USA

Can I make a dynamic popup?

Post by kmullins » 2024-03-31 15:15

I am leveraging the JavaScript Helper to add a bottom on a Detail view. I want to be able to click a button that will send an ID to the webpage I want to load in the popup. I am unsure which method I should use to make this work, "Links to other pages" or "Buttons executing javascript functions".

Using the "Links to other pages," I can format the link to work so it appends the ID dynamically from the detail view I am clicking the button on, but I can't figure out how to make that be popup instead of a new page. I use the "Buttons executing javascript functions." If I hard code the value, it works to open up a popup, but I can't seem to reformat it to include the dynamic ID.

Here is my code the Links example is "Add a Credit Card," and the button example is "Add a Credit Card2"
AppGini Version 24.11
AppGiniHelper.min.js?v=1711874380:13 AppGiniHelper Javascript Library Version 2023.01.04.2

Code: Select all

// file: hooks/Bidders-dv.js
// get an instance of AppGiniDetailView class
var dv = AppGiniHelper. DV; 
// hide the id-field
dv.getField("ID").hide(); 
dv.setTitle('Bidder Details');
var BidderID = AppGiniHelper.DV.getField('ID');
var BidderID_value = BidderID.getValue();


// create a (full sized) row (width = 12) and
// add a headline "Bidder Info" ("#Bidder Info"), then 
// add fields "last_name", "first_name", then
// add a divider-line ("-"), then
// add fields "birth_date" and "age".
// beautify label-alignment (sizeLabels(2))
var row_1 = new AppGiniLayout([1,1,10])
    .add(1, ["#Bidder Info"])
    .add(2, ["ID"])
    .sizeLabels(2);
var row_2 = new AppGiniLayout([7, 5])
    .add(1, ["ContactID"])
    .add(2, ["BidNo"])
    .sizeLabels(2);
var row_3 = new AppGiniLayout([12])
    .add(1, ["-"]);

var row_4 = new AppGiniLayout([7, 5])
    .add(1, ["#Pre-Event", "BidderType", "TablePreference"])
    .add(2, ["#Event", "Card", "CheckedIn", "QuickPay", "TotalBids","TotalOwed","TotalPaid"]);

// create a variable "container" for easier handling of new action buttons
var container = dv. ActionButtons(); 

// create a group named "Links"
var group = container.addGroup("Links"); 

// add some links
group.addLink("Print Invoice", "bidder_invoice.php?BidderID=" + BidderID_value, Variation. Warning, "print"); 
group.addLink("Add Credit Card", "creditcard.php?BidderID=" + BidderID_value, Variation.Success, "credit-card"); 


// add two buttons for toggling the compact-mode with no text but icons "minus"/"plus"
group.addButton("Hide", function () { dv.compact(); }, null, "minus"); 
group.addButton("Show", function () { dv.compact(false); }, null, "plus"); 
group.addButton("Add Credit Card2", function openPopup() {
    // Replace 'https://www.example.com' with the desired URL
    window.open('creditcard.php?BidderID=1', '_blank', 'width=1000,height=600');
  });
Thanks in advance.
I know enough to be dangerous but not enough to be effective.
AppGini 24.17

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

Re: Can I make a dynamic popup?

Post by jsetzer » 2024-03-31 15:58

The new button shall open a modal dialog and load the given url?
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

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

Re: Can I make a dynamic popup?

Post by jsetzer » 2024-03-31 16:34

You are almost there.

Check the parameters for addButton-function:
  1. button text
  2. javascript function like function() { /* YOUR CODE HERE */ }
  3. variation
  4. icon-name
  5. text-alignment
chrome_kKt2Pwjvvl.png
chrome_kKt2Pwjvvl.png (6.08 KiB) Viewed 711 times

Code: Select all

// file: hooks/TABLENAME-dv.js
// variable for detail view
const DV = AppGiniHelper.DV;

// custom buttons / create button-group
const group = DV.getActionButtons().addGroup("Links");

// create button
group.addButton("My 1st Button", function() {
    const id = DV.getSelectedID();
    const url = `calendar.php?id=${id}&Embedded=1`;
    const options = {
        title: "My Modal Dialog Title",
        url: url,
        size: "full"
    };
    modal_window(options);
}, Variation.default, "flash", ButtonAlign.Left);
chrome_51Ltu0LVJq.png
chrome_51Ltu0LVJq.png (2.01 KiB) Viewed 711 times
ezgif-6-5090e230f4.gif
ezgif-6-5090e230f4.gif (195.77 KiB) Viewed 711 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

kmullins
Posts: 14
Joined: 2023-12-10 16:44
Location: Seattle, WA USA

Re: Can I make a dynamic popup?

Post by kmullins » 2024-04-01 00:47

Thanks! I was finally able to get things to work once I changed my page to match yours for the way you called the variables and the case of the DV.

I am just curious. I was initially using the help on https://www.appgini.de/docs/Javascript- ... hout-title, but I noticed your sample no longer users var or dv. You are using const and DV. Once I changed my *-dv.js to match how you listed in your sample, I got it to work. Is there a reason you have changed your method?

Thanks again!
Kevin :D
I know enough to be dangerous but not enough to be effective.
AppGini 24.17

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

Re: Can I make a dynamic popup?

Post by jsetzer » 2024-04-01 04:46

(1) Variable declaration let, var, const
For variable declaration there are some differences between let, var and const.
You can keep going with var because that's the most flexible. If you are interested in optimizing your code, check out the javascript docs for variable declaration.

(2) Usage of DV
I'm still using AppGiniHelper.DV in my code. It depends on how often I need that variable.
If I need it once, I'm fine with this:

Code: Select all

var actionbuttons = AppGiniHelper.DV.getActionButtons();
If I need it more often (that it usually the case) I declare a short variable dv and use that instead of writing AppGiniHelper.DV every time. That's just for making my code more compact:

Code: Select all

var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
// more code with dv.method() calls
(3) DV vs. dv
AppGiniHelper.dv (lowercase) and AppGiniHelper.DV (uppercase) are just the same, technically speaking. It's just an alias to avoid syntax errors in beginner's code.

(4) Variable naming
When declaring a variable, the name ist up to you. Both are fine:

Code: Select all

var dv = AppGiniHelper.DV;

Code: Select all

var DV = AppGiniHelper.DV;
Just make sure you are using exact same writing further on.

Tipp
If got used to declare DV variable in hooks/header-extras.php, already. So I don't need to declare it again in every hooks/TABLENAME-dv.js-file. Also, common DV-changes I want in every detail view I do in hooks/header-extras.php.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

kmullins
Posts: 14
Joined: 2023-12-10 16:44
Location: Seattle, WA USA

Re: Can I make a dynamic popup?

Post by kmullins » 2024-04-01 14:31

Thanks for the explanations. It has been hard to distinguish between a lack of understanding of the underlining code and just not fully understanding the helper services with Appginig itself or the Javascript helper.

Kevin
I know enough to be dangerous but not enough to be effective.
AppGini 24.17

Post Reply