Jeroen Bosch - Sunday, July 13, 2014 11:55 AM:
Hello,
I am looking for an example of a configuration of a form with an advanced look and feel form using HTML, JS, method call, AML, ....
My goal is to use this example as a starting point to develop a form showing the relationships of an item type in a very different way that the "out of the box" form is showing.
Thank you,
Jeroen
DavidSpackman - Sunday, July 13, 2014 11:38 PM:
- Have a look at the project itemtype. On Add It calls a custom dialog to help users create a project.
- See the views tab
- For an advanced form, see the CMII Affected Items Wizard community project
- Review the out of the box dialogs in Clientsscripts
Dave
Jeroen Bosch - Monday, July 14, 2014 2:45 PM:
Thanks Dave.
Jeroen
Jeroen Bosch - Friday, July 25, 2014 11:49 AM:
Hi Dave,
the existing configurations are quite complex to start with.
Based on my understanding on how Aras work, I would like to do the following:
1. In an item form, I want to create an HTML field containing a JavaScript that calls a client-side JavaScript method using evalMethod and passing the item id as a parameter of the call.
2. The JavaScript method ("MyJavaScriptMethod"):
2.1 calls a C# server-side method which contains the business logic
2.2 based on the returned items, generates an HTML code
2.3 returns the HTML code to the HTML form.
Who can help me to build a very basic example based on this approach?
Thanks.
Jeroen
Jeroen Bosch - Sunday, July 27, 2014 3:03 PM:
Hi Dave,
the existing configurations are quite complex to start with.
Based on my understanding on how Aras work, I would like to do the following:
1. In an item form, I want to create an HTML field containing a JavaScript that calls a client-side JavaScript method using evalMethod and passing the item id as a parameter of the call.
2. The JavaScript method ("MyJavaScriptMethod"):
2.1 calls a C# server-side method which contains the business logic
2.2 based on the returned items, generates an HTML code
2.3 returns the HTML code to the HTML form.
Who can help me to build a very basic example based on this approach?
Thanks.
Jeroen
Harsha - Monday, July 28, 2014 5:52 AM:
Hi Jeroen,
If you want to display an Item's relationships on its main form, here is an example: I am using 'Part' and 'Part BOM' relationship in the example.
Create an HTML field on Part's form and add the following code to its 'HTML Code' field. On load of a Part Item this code creates a table and displays its BOM along with 'View' buttons. Also adds Hide/Show Relationship buttons.
HTML & Js:
<head>
<script type="text/javascript">
function Load()
{
var BOMdiv = document.getElementById("BOM");
var inn =top.aras.newIOMInnovator();
var thisItem = document.thisItem;
var BOM = inn.newItem("Part","get");
//alert("This Part's Id:" + thisItem.getID());
BOM.setAttribute("where","[PART].id in(select related_id from [PART_BOM] where source_id = '"+thisItem.getID()+" ' )");
var Results = BOM.apply();
if(Results.getItemCount()<=0)
{
var msg = document.createElement("span");
msg.innerHTML = "BOM not found for this Item";
BOMdiv.appendChild(msg);
}
else{
var headColumns = [' # ','Part Number','Part Name','Action'];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var headrow = document.createElement("tr");
for (var j = 0; j < headColumns.length; j++) {
var headcell = document.createElement("td");
var headcellText = document.createTextNode(headColumns[j]);
headcell.appendChild(headcellText);
headrow.appendChild(headcell);
headcell.setAttribute("style","font-size:16px;color:white;width:150px;text-align:center;");
}
headrow.setAttribute("style","border:1px solid black;border-collapse:collapse;border-collapse:collapse;font-family:Rupakara;font-size:16px;background-color:#6E6E6E;");
tblBody.appendChild(headrow);
BOMdiv.appendChild(tblBody);
//var ItemIds = [];
for(var a=0;a<Results.getItemCount();a++)
{
var itemId = Results.getItemByIndex(a).getID();
//ItemIds.push(itemId);
var partNum = Results.getItemByIndex(a).getProperty("item_number","");
var partName = Results.getItemByIndex(a).getProperty("name","");
var datarow = document.createElement("tr");
var cell1 = document.createElement("td");
var cell1Text = document.createTextNode((a+1));
cell1.appendChild(cell1Text);
datarow.appendChild(cell1);
var cell2 = document.createElement("td");
var cell2Text = document.createTextNode(partNum);
cell2.appendChild(cell2Text);
datarow.appendChild(cell2);
var cell3 = document.createElement("td");
var cell3Text = document.createTextNode(partName);
cell3.appendChild(cell3Text);
datarow.appendChild(cell3);
var cell4 = document.createElement("td");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "View";
btn.id = itemId;
btn.onclick = function() { top.aras.uiShowItem("Part", this.id, 'tab view', true); }
cell4.appendChild(btn);
datarow.appendChild(cell4);
tblBody.appendChild(datarow);
BOMdiv.appendChild(tblBody);
}
}
}
function Show()
{
var obj = document.getElementById("BOM");
if (obj)
{
obj.style.display = 'block';
document.getElementById("showbtn").style.display = 'none';
document.getElementById("hidebtn").style.display = 'block';
}
}
function Hide()
{
var obj = document.getElementById("BOM");
if (obj)
{
obj.style.display = 'none';
document.getElementById("showbtn").style.display = 'block';
document.getElementById("hidebtn").style.display = 'none';
}
}
</script>
</head>
<body onload="Load();">
<span style="font-size:16px;">Part BOM</span><input type="button" id="showbtn" onclick="Show();" value="+" style="display:none;"/><input type="button" id="hidebtn" onclick="Hide();" value="-" />
<div id="BOM">
</div>
</body>
If I understood your requirement in wrong way, please ignore this.
Thank you,
Harsha
pankaj - Monday, July 28, 2014 7:54 AM:
Hi Jeroen,
Could you please explain me in detail.
As per my understanding,
From JavaScript method you want to call C# method(with parameter).
Regards,
Pankaj B
Jeroen Bosch - Monday, July 28, 2014 3:31 PM:
Dear Harsha,
I have tried your code and it works 100%.
As I said, I prefer to separate the different domains: business and web presentation.
I am very curious to see how we could separate your code in server and client side methods.
Cheers
Jeroen
Jeroen Bosch - Monday, July 28, 2014 8:59 AM:
Dear Pankaj and Harsha,
thank you for your help and questions.
The way I want to organise my Aras configuration is as follows:
- A server-side C# method which contains the business logic: e.g. generating a BOM structure
- A client-side JS method which generates HTML code (e.g. a table) based on the list of items returned by the C# method.
- A JS code in an item-type form which displays the HTML code generated by the client-side JS method in any appropriate area of the form page
in my opinion, this structuration enable business logic reuse but also allows the same HTML code to be presented in different forms and in different styles.
I hope that I have explained more clearly what I am trying to achieve.
Jeroen.
Harsha - Tuesday, July 29, 2014 3:41 AM:
Hi Jeroen,
Which fragment of the above should go into server method? If you want to separate the query from the code then you have to use applyMethod :
function Load()
{
var BOMdiv = document.getElementById("BOM");
var inn =top.aras.newIOMInnovator();
var thisItem = document.thisItem;
var Results = top.aras.applyMethod("Business Logic Method","<ItemId>"+thisItem.getID()+"</ItemId>"); //-- 'Business Logic Method' is server method's name
Results = Results.replace('<Result>','');
Results = Results.replace('</Result>','');
if(Results.length<=0)
{
var msg = document.createElement("span");
msg.innerHTML = "BOM not found for this Item";
BOMdiv.appendChild(msg);
}
var temp = new Array();
temp = Results.split(",");
if(temp.length<=0)
{ //--same code }
else{
//-- same code till
for(var a=0;a<temp.length;a++)
{
var itemId = temp[a];
var Item_ = inn.getItemById("Part",itemId);
var partNum = Item_.getProperty("item_number","");
var partName = Item_.getProperty("name","");
//-- remaining code
}
}
}
And in the Server method : C#
Innovator inn = this.getInnovator();
string ItemId = this.getProperty("ItemId");
Item BOM = inn.newItem("Part","get");
BOM.setAttribute("where","[PART].id in(select related_id from [PART_BOM] where source_id = '"+ItemId+"' )");
Item ResBOM = BOM.apply();
string IdsString ="";
for(int a=0;a<ResBOM.getItemCount();a++)
{
string id_ = ResBOM.getItemByIndex(a).getID();
IdsString= IdsString+id_+",";
}
IdsString = IdsString.Substring(0, IdsString.Length - 1);
return inn.newResult(IdsString);
If you want to display the Multilevel BOM on your Item's form itself then you can copy the same code form 'Part MultiLevel BOM Grid' and paste into an HTML field. Because the query what we are using will not retrieve multilevel BOM, there is an action(PE_GetMutilBOM) to do that.
Thank you,
Harsha
Jeroen Bosch - Tuesday, July 29, 2014 5:03 AM:
Dear Harsha,
My idea is to split your code in 3 parts:
1. The business logic in a C# method:
Innovator inn = this.getInnovator();
string ItemId = this.getProperty("ItemId");
Item BOM = inn.newItem("Part","get");
BOM.setAttribute("where","[PART].id in(select related_id from [PART_BOM] where source_id = '"+ItemId+"' )");
Item ResBOM = BOM.apply();
return ResBOM;
2. The generation of an HTML table in an Aras JavaScript client-side method
...
var Results = top.aras.applyMethod("Business Logic Method","<ItemId>"+thisItem.getID()+"</ItemId>");
var tblBody = document.createElement("tbody");
...
Harsha - Tuesday, July 29, 2014 7:57 AM:
Hi Jeroen,
Yes, it is possible to return a DOM object from a JS function, but I never tried evalMethod(). I am not sure how to pass a value(here we need to pass Item's id) using evalMethod() to the being called function('BOM table method', because 'BOM table method' method should pass the received id to Server Method to construct the query) like how we were doing using applyMethod("Business Logic Method","<ItemId>"+thisItem.getID()+"</ItemId>").
The reason why I was changing the XML is I was facing an issue while retrieving the resulted items in JS. So, I changed it as a sting first and converted to an array to retrieve the items.
Jeroen Bosch - Wednesday, July 30, 2014 4:51 AM:
Thanks Harsha,
actually I am struggling to make this example working too.
evalMehod seems to work like applyMethod so passing the parameter from the form to the JS client-side method works fine.
I am also able to get the result of the AML query back from the C# server-side method to the JS client-side method but I am stuck in:
1) accessing the returned items
2) communicating the DOM object/HTML code to the form.
Jeroen
