Skip to content

Commit d5a7aba

Browse files
cgillis-arascgillis-aras
authored
Merge pull request #10 from cgillis-aras/master
Added sample of opening HTML Page in dialog
2 parents f891857 + ca21926 commit d5a7aba

File tree

8 files changed

+194
-7
lines changed

8 files changed

+194
-7
lines changed

‎Import/CustomModalDialog/Import/Action/labs_CallCustomModalForHTML.xml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<AML>
2+
<Item type="Action" id="C6F0860AB30F448283BF954E5590D6C7" action="add">
3+
<item_query />
4+
<label xml:lang="en">Open Custom Modal Dialog (HTML)</label>
5+
<location>client</location>
6+
<method keyed_name="labs_CallCustomModalForHTML" type="Method">
7+
<Item type="Method" action="get" select="id">
8+
<name>labs_CallCustomModalForHTML</name>
9+
</Item>
10+
</method>
11+
<target>none</target>
12+
<type>item</type>
13+
<name>labs_CallCustomModalForHTML</name>
14+
</Item>
15+
</AML>

‎Import/CustomModalDialog/Import/Fixes/AddActionToItemTypes.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,8 @@
77
<related_id keyed_name="labs_OpenMaxModalDialog" type="Action">0807F3255CFD45C092B8CA16D69897E6</related_id>
88
<source_id keyed_name="Part" type="ItemType" name="Part">4F1AC04A2B484F3ABA4E20DB63808A88</source_id>
99
</Item>
10+
<Item type="Item Action" action="add" id="EE18A327F6524D0881F5A5DBFE43994D">
11+
<related_id keyed_name="labs_CallCustomModalForHTML" type="Action">C6F0860AB30F448283BF954E5590D6C7</related_id>
12+
<source_id keyed_name="Part" type="ItemType" name="Part">4F1AC04A2B484F3ABA4E20DB63808A88</source_id>
13+
</Item>
1014
</AML>

‎Import/CustomModalDialog/Import/Form/labs_CustomModalDialogForm.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<font_family>tahoma, arial, helvetica, sans-serif</font_family>
1919
<font_size>8pt</font_size>
2020
<font_weight>bold</font_weight>
21-
<html_code> </html_code>
21+
<html_code />
2222
<is_disabled>0</is_disabled>
2323
<is_visible>1</is_visible>
2424
<label_position>top</label_position>

‎Import/CustomModalDialog/Import/Method/aip_CallSearchDialog.xml

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@
1010
var param = {
1111
aras: top.aras,
1212
itemtypeName: 'Part', // tbd: use inArgs
13-
multiselect: false };
13+
multiselect: false,
14+
type: 'SearchDialog',
15+
dialogHeight: 450,
16+
dialogWidth: 700,
17+
resizable: true
18+
};
1419
15-
var options = { dialogHeight:450, dialogWidth:700, resizable:true};
1620
var searchedItem;
17-
18-
param.callback = function(dlgRes){
21+
var callback = function(dlgRes){
1922
if(!dlgRes) {
2023
return;
2124
}
@@ -28,10 +31,10 @@ param.callback = function(dlgRes){
2831
var table = getFieldByName("searchResult").getElementsByTagName("input")[0];
2932
table.setAttribute("value", keyed_name);
3033
};
31-
34+
3235
var wnd = top.aras.getMainWindow();
3336
wnd = wnd === top ? wnd.main : top;
34-
top.aras.modalDialogHelper.show('SearchDialog', wnd, param);]]></method_code>
37+
wnd.ArasModules.Dialog.show('iframe', param).promise.then(callback);]]></method_code>
3538
<method_type>JavaScript</method_type>
3639
<name>aip_CallSearchDialog</name>
3740
</Item>

‎Import/CustomModalDialog/Import/Method/labs_CallCustomModalForHTML.xml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<AML>
2+
<Item type="Method" id="D5679DBAD8024EF89EAD1942965AE942" action="add">
3+
<execution_allowed_to keyed_name="World" type="Identity">A73B655731924CD0B027E4F4D5FCC0A9</execution_allowed_to>
4+
<method_code><![CDATA[// Aras Labs Project
5+
// Christopher Gillis - 10/3/18
6+
//
7+
// Call a custom HTML page in a modal dialog
8+
// Perform some action based on the values returned from dialog
9+
10+
var topWnd = aras.getMostTopWindowWithAras(window);
11+
topWnd = topWnd.main || topWnd;
12+
13+
// Here we want to pass in the relative path to the HTML file in our code tree.
14+
// The folder we start in is the /Innovator/Client/scripts/ folder, and our HTML
15+
// page is stored at /Innovator/Client/customers/custom_dialog_page.html
16+
// So we have to go back one folder by using '../' and then go to the customers folder
17+
var pathToHTML = '../customer/custom_dialog_page.html';
18+
19+
// Get form parameters
20+
var params = {
21+
title: 'Test Dialog from HTML Page',
22+
aras: aras,
23+
dialogWidth: 800,
24+
dialogHeight: 400,
25+
content: pathToHTML
26+
};
27+
28+
topWnd.ArasModules.Dialog.show('iframe', params).promise.then(function(dlgRes) {
29+
debugger;
30+
// Perform logic using dialog result here
31+
return alert("Param 1: " + dlgRes["parameter_1"] + " ... Param 2: " + dlgRes["parameter_2"] + " ... Param 3: " + dlgRes["parameter_3"]);
32+
});]]></method_code>
33+
<method_type>JavaScript</method_type>
34+
<name>labs_CallCustomModalForHTML</name>
35+
</Item>
36+
</AML>

‎Innovator/Client/customer/custom_dialog_page.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<link rel="stylesheet" type="text/css" href="../styles/default.css" />
7+
<style>
8+
.dialog_input {
9+
padding-bottom: 20px;
10+
}
11+
12+
.input_label {
13+
font-weight: bold;
14+
}
15+
</style>
16+
<script type="text/javascript">
17+
// You can pass in any number of arguments to this HTML page
18+
window.dialogArguments = window.frameElement.dialogArguments;
19+
// We'll assume an aras object was passed in so we can do stuff like item manipulation
20+
var aras = dialogArguments.aras;
21+
// We'll also assume a title is passed in
22+
document.title = dialogArguments.title;
23+
</script>
24+
<script>
25+
onload = function() {
26+
// Do any setup stuff once the dialog loads
27+
}
28+
29+
// Set up the code to launch the search dialog for parameter 3
30+
function onSearch() {
31+
var param = {
32+
aras: aras,
33+
itemtypeName: 'Part',
34+
multiselect: false,
35+
type: 'SearchDialog'
36+
};
37+
38+
var topWnd = aras.getMostTopWindowWithAras();
39+
(topWnd || window).ArasModules.Dialog.show('iframe', param).promise.then(function(dlgRes) {
40+
if (!dlgRes) {
41+
return;
42+
}
43+
44+
var searchedItem = dlgRes.item;
45+
if (!searchedItem) {
46+
return;
47+
}
48+
var keyed_name = top.aras.getKeyedNameEx(searchedItem);
49+
var input = document.getElementById("parameter_3_text");
50+
input.value = keyed_name;
51+
})
52+
}
53+
54+
function onSubmit() {
55+
// get parameter_1 field
56+
var wrapper1 = document.getElementById("parameter_1");
57+
var p1 = wrapper1.getElementsByTagName("textarea")[0];
58+
59+
// get parameter_2 field
60+
var wrapper2 = document.getElementById("parameter_2");
61+
var p2 = wrapper2.getElementsByTagName("input")[0];
62+
63+
// get parameter_3 field
64+
var wrapper3 = document.getElementById("parameter_3");
65+
var p3 = wrapper3.getElementsByTagName("input")[0];
66+
67+
// Confirm fields were correctly retrieved
68+
if (!p1) {
69+
alert("Can't find field parameter_1");
70+
return;
71+
}
72+
if (!p2) {
73+
alert("Can't find field parameter_2");
74+
return;
75+
}
76+
if (!p3) {
77+
alert("Can't find field paramter_3");
78+
return;
79+
}
80+
81+
// return entered values
82+
var retVal = {};
83+
retVal["parameter_1"] = p1.value;
84+
retVal["parameter_2"] = p2.checked;
85+
retVal["parameter_3"] = p3.value;
86+
dialogArguments.dialog.close(retVal);
87+
}
88+
</script>
89+
</head>
90+
<body>
91+
<h3>HTML Page for Custom Dialog</h3>
92+
<div class="dialog_input dialog_textarea" id="parameter_1">
93+
<div class="input_label">Parameter 1</div>
94+
<textarea style="height: 50px; width: 350px;"></textarea>
95+
</div>
96+
<div class="dialog_input dialog_checkbox" id="parameter_2">
97+
<div class="input_label">Parameter 2</div>
98+
<input type="checkbox">
99+
</div>
100+
<div class="dialog_input dialog_item" id="parameter_3">
101+
<div class="input_label">Parameter 3</div>
102+
<input type="text" id="parameter_3_text">
103+
<button class="input_button" onclick="onSearch()">Search</button>
104+
</div>
105+
<button class="submit_button" onclick="onSubmit()">Submit</button>
106+
</body>
107+
</html>
108+

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ This project and the following release notes have been migrated from the old Ara
88

99
Release | Notes
1010
--------|--------
11+
[v2.4](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.4) | Introduced an example of openeing an HTML page from a modal dialog. Tested for 11.0 SP15.
1112
[v2.3.1](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.3.1) | Fixed a typo in the import package - was causing invalid AML.
1213
[v2.3](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.3) | Added a new action/method to demonstrate how to call a dialog that can be maximized. Tested in 11 SP12, but may work in 11 SP9-11.
1314
[v2.2](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.2) | Added field to demonstrate use of search dialog. Clicking the "Search Parameter 3" button programmatically calls the default Aras search dialog. Allows the user to search for a Part and populate the "Parameter 3" field with their selection.
@@ -19,6 +20,7 @@ Release | Notes
1920

2021
Project | Aras
2122
--------|------
23+
[v2.4](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.4) | 11.0 SP15
2224
[v2.3.1](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.3.1) | 11.0 SP12
2325
[v2.3](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.3) | 11.0 SP12
2426
[v2.2](https://github.com/ArasLabs/custom-modal-dialog/releases/tag/v2.2) | 11.0 SP9, 11.0 SP12
@@ -39,6 +41,15 @@ Project | Aras
3941

4042
### Install Steps
4143

44+
#### Code tree Installation
45+
1. Backup your code tree and store the archive in a safe place
46+
2. Navigate to your local `..\CustomModalDialog\` folder
47+
3. Copy the `\Innovator\` folder
48+
4. Paste this at the root of your install directory
49+
+ By default this is `C:\Program Files\Aras\Innovator\`
50+
51+
#### Database Installation
52+
4253
1. Backup your database and store the BAK file in a safe place.
4354
2. Open up the Aras Package Import tool.
4455
3. Enter your login credentials and click **Login**
@@ -82,6 +93,15 @@ The modal dialog will close and an alert will appear, showing the values of para
8293

8394
This sample uses the same form and logic as the first sample, so everything other than the resizing behavior is the same. The only difference is that the method `labs_CallMaxModalDialog` calls `topWnd.ArasModules.MaximazableDialog.show()` instead of the usual `topWnd.ArasModules.Dialog.show()`.
8495

96+
### Sample 3: Aras Modal Dialog with HTML Page
97+
![Custom modal dialog](./Screenshots/html-dialog.png)
98+
99+
1. Login to Aras.
100+
2. Navigate to **Design > Parts** in the table of contents (TOC).
101+
3. Right click on a Part item in the main grid and select **Open Custom Modal Dialog (HTML)**.
102+
103+
This sample uses a custom HTML Page instead of the Form used in the first and second sample, but the logic behind it is very similar. The dialog is still opened with `topWnd.ArasModules.Dialog.show()` but instead of configuring the dialog parameters with `content: ShowFormAsADialog.html`, we instead pass in the relative path to another HTML file in the code tree like `content: ../customers/custom_dialog_page.html`.
104+
85105
## Contributing
86106

87107
1. Fork it!
@@ -99,6 +119,7 @@ Created by Eli Donahue for Aras Labs. @EliJDonahue
99119
Contributions by:
100120
* @AngelaIp
101121
* @mptap
122+
* @cgillis-aras
102123

103124
## License
104125

‎Screenshots/html-dialog.png

19.3 KB
Loading

0 commit comments

Comments
 (0)