Skip to content

Add the drapo function called 'GetExternalFrame' with complete iframe communication example #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Add the drapo function called 'GetExternalFrame' with complete iframe communication example #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bdca0e8
Initial plan
Copilot Jul 4, 2025
2485d2d
Add GetExternalFrame Drapo function documentation
Copilot Jul 4, 2025
344239a
Update GetExternalFrame sample to match proper HTML structure
Copilot Aug 18, 2025
157eab6
Fix GetExternalFrame sample: add missing iframe element and sample co…
Copilot Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/WebDocs/wwwroot/app/functions/GetExternalFrame/description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>The GetExternalFrame function retrieves data from an external iframe by calling a specified function within that iframe and storing the result in a data key. This function enables communication between the main page and embedded iframes, allowing you to get data from external content.</p>
27 changes: 27 additions & 0 deletions src/WebDocs/wwwroot/app/functions/GetExternalFrame/parameters.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
[
{
"Name": "frameID",
"Description": "The ID of the iframe element from which to retrieve data",
"Types": [ "text", "mustache" ],
"Optional": false
},
{
"Name": "externalFunction",
"Description": "The name of the function to call within the iframe to retrieve data",
"Types": [ "text", "mustache" ],
"Optional": false
},
{
"Name": "dataKey",
"Description": "The data key where the retrieved data will be stored",
"Types": [ "text", "mustache" ],
"Optional": false
},
{
"Name": "isClone",
"Description": "Whether to clone the retrieved data before storing it",
"Types": [ "boolean" ],
"Optional": true,
"DefaultValue": "false"
}
]
36 changes: 36 additions & 0 deletions src/WebDocs/wwwroot/app/functions/GetExternalFrame/samples/001/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<script src="/drapo.js"></script>
<title>Function - GetExternalFrame</title>
</head>
<body>
<span>Function - GetExternalFrame</span>
<div d-dataKey="frameData" d-dataType="object" d-dataProperty-result="[]"></div>
<div>
<h3>GetExternalFrame Example</h3>

<!-- The iframe that contains the external content -->
<iframe id="myExternalFrame" src="~/app/shared/sampleIframe.html" style="width: 100%; height: 200px; border: 1px solid #ccc; margin-bottom: 10px;"></iframe>

<!-- Button to retrieve data from the iframe -->
<input type="button" value="Get Data from External Frame" d-on-click="GetExternalFrame(myExternalFrame,GetSampleData,frameData,true)" />
Copy link
Copy Markdown
Member

@silvath silvath Aug 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot There is no iframe named myExternalFrame.
I cant event find an iframe in this page

Copy link
Copy Markdown
Contributor Author

Copilot AI Aug 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed! I've added the missing iframe element with ID "myExternalFrame" and created the corresponding iframe content with the GetSampleData function. The sample now includes a functional iframe that demonstrates real cross-frame communication. Commit 157eab6.


<!-- Display the retrieved data -->
<div d-if="{{frameData.result.length}} > 0">
<h4>Data Retrieved from Frame:</h4>
<ul>
<li d-for="item in frameData.result">
{{item.name}}: {{item.value}}
</li>
</ul>
</div>
<div d-if="{{frameData.result.length}} == 0">
<p>No data retrieved yet. Click the button above to get data from the external frame.</p>
</div>

<!-- Note about the iframe -->
<p><strong>Note:</strong> This example demonstrates calling a GetSampleData() function inside the iframe above with ID "myExternalFrame".</p>
</div>
</body>
</html>
1 change: 1 addition & 0 deletions src/WebDocs/wwwroot/app/functions/GetExternalFrame/samples/001/description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>A sample demonstrating how to use GetExternalFrame to retrieve data from an external iframe by calling a function within that iframe and displaying the result</p>
25 changes: 25 additions & 0 deletions src/WebDocs/wwwroot/app/shared/sampleIframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<script src="/drapo.js"></script>
<title>Sample Iframe Content</title>
</head>
<body>
<h4>External Frame Content</h4>
<p>This iframe contains sample data that can be retrieved by the parent window.</p>

<script>
// Sample function that returns data to the parent frame
function GetSampleData() {
return [
{ name: "Product A", value: "150" },
{ name: "Product B", value: "200" },
{ name: "Product C", value: "75" }
];
}

// Make the function globally available
window.GetSampleData = GetSampleData;
</script>
</body>
</html>