Can I make a dynamic popup?

[kmullins]

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.

[jsetzer]

The new button shall open a modal dialog and load the given url?

[jsetzer]

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 (6.08 KiB) Viewed 634 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 (2.01 KiB) Viewed 634 times

ezgif-6-5090e230f4.gif (195.77 KiB) Viewed 634 times

[kmullins]

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

[jsetzer]

(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.

[kmullins]

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