Response object documentation corrections

Use this board to ask questions or have discussions with other Rich Displays users.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Response object documentation corrections

Post by Scott Klement »

abhimanu21 wrote:1. I think it is coming as first byte from text "custom-response". Is there is other way to pass the property value then what i am doing?
The string "custom-response" is just a placeholder in the example. You are meant to change that to whatever you want to provide in your variable. So in the case of an indicator field, you'd want to assign either "1" or "0".

Please understand that Profound UI does NOT actually KNOW what you want to send back. That's the point of writing your own code, to make it do whatever you want. So if you want it to contain a "1", you assign a "1". If you want it to contain a "0" you assign a "0". It will do exactly what you tell it to do, so if you assign "custom-response" it will try to put "custom-response" in the variable. (And since the variable is only 1 byte long, only the "c" will fit.)

No, there is not another way to do it.
abhimanu21 wrote:2. Also please suggest how to make this JS logic independent of hard-coded record format name, RPG field name and property name. Do we have to add any logic to custom widget js as well to make it independent of hard coded logic.
We provide a way to do that, which is in the documentation page that we've been discussing throughout this thread:
http://www.profoundlogic.com/docs/displ ... onse+Value
abhimanu21 wrote:Tried to use DOM div to get "pui", containing the properties, "fieldName" and "formatName". However i don't see these 2 properties listed there. Am i missng anything? We are at 5.10.0 version.
They were added in 5.8.0, and are in all versions that come after that (including 5.10.0).

If you can't figure out how to get them to work, please post the code that's not working so I can try it.
abhimanu21
New User
Posts: 10
Joined: Fri Jan 26, 2018 4:50 pm
First Name: Abhimanyu
Last Name: Gupta
Company Name: WinSupply
Contact:

Re: Response object documentation corrections

Post by abhimanu21 »

Please see below code for custom widget. Let me know if you need any other details.

Custom widget JS logic:


pui.widgets.add({
name: "Font Awesome",
newId: "fontAwesome",

defaults: {
"width":"13px",
"height":"16px",
"text align":"center",
"cursor":"pointer",
"onclick":"applyProperty(this.id, 'winresponse', '1'); pui.click()"
},
propertySetters: {
"field type": function(params) {
if (params.design) {
params.properties["css class"] = '';
params.dom.innerHTML = "<i class='fa fa-" + params.properties["font awesome type"] +"'></i>";

} else {
params.dom.className = "fa fa-" + params.properties["font awesome type"];
params.dom.setAttribute("wintest","1");
}
},

"font awesome type": function(params) {
if (params.design) {
params.dom.innerHTML = "<i class='fa fa-" + params.newValue + "'></i>";
params.dom.firstChild.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];
} else {
params.dom.className = "fa fa-" + params.properties["font awesome type"];
params.dom.style.fontSize = parseInt(params.properties["height"]) < parseInt(params.properties["width"]) ? params.properties["height"] : params.properties["width"];
}
},

"height": function(params) {
if (params.design) {
params.dom.firstChild.style.fontSize = parseInt(params.value) < parseInt(params.properties["width"]) ? params.value : params.properties["width"];
}
},

"width": function(params) {
if (params.design) {
params.dom.firstChild.style.fontSize = parseInt(params.value) < parseInt(params.properties["height"]) ? params.value : params.properties["height"]
}
},
}
});


//the Other... option in choices allows the users to pick a different option than what is listed
pui.addCustomProperty({
name: "font awesome type",
help: "sets the type of the font awesome widget",
choices: [
"adjust",
"arrows",
"arrow-right",
"bars",
"bell",
"caret-down",
"caret-up",
"check",
"check-circle-o",
"chevron-left",
"chevron-right",
"circle-o",
"clock-o",
"cog",
"ellipsis-v",
"file-excel-o",
"history",
"minus-circle",
"minus-square-o",
"mobile",
"pencil-square-o",
"plus",
"plus-square-o",
"question-circle",
"refresh",
"search",
"sort",
"times",
"times-circle-o",
"truck",
"user",
"Other..."
],
controls: ["Font Awesome"],
category: "Font Awesome"
});

pui.addCustomProperty({
name: "winresponse",
controls: ["Font Awesome"],
category: "Identification"
});


--------------------------------------------------------------------------------------------------------------------------------
On Submit function:

window.myCustomWidgetOnSubmit = function(response) {
//response["JON.CLICKME"] = $("#fontAwesome1").attr("winresponse");
var widgets = document.querySelectorAll("div[wintest]");
console.log(widgets);
for( var i=0; i < widgets.length; i++){
console.log(widgets.pui);
var idVar = widgets.pui.formatName+ "." + widgets.pui.fieldName;
response[idVar]= widgets.getAttribute("winresponse");
}
return true;
}

---------------------------------------------------------------------------------------------------------------------------------------------------
Here i get the error that formatName and fieldName property is not found.

Below is part of result including pui.

outerHTML:"<div id="fontAwesome1" class="fa fa-plus" wintest="1" style="position: absolute; left: 545px; top: 110px; width: 13px; height: 16px; text-align: center; cursor: pointer; font-size: 13px;"></div>"
outerText:""
ownerDocument:document
parentElement:null
parentNode:null
prefix:null
previousElementSibling:null
previousSibling:null
pui:
properties:
cursor:"pointer"
field type:"Font Awesome"
font awesome type:"plus"
height:"16px"
id:"fontAwesome1"
left:"545px"
onclick:"applyProperty(this.id, 'winresponse', '1'); pui.click()"
originalValue:""
text align:"center"
top:"110px"
width:"13px"
winresponse:"1"

__proto__:Object
__proto__:Object
scrollHeight:0
scrollLeft:0
scrollTop:0
scrollWidth:0
shadowRoot:null
slot:""
spellcheck:true
style:CSSStyleDeclaration {0: "position", 1: "left", 2: "top", 3: "width", 4: "height", 5: "text-align", 6: "cursor", 7: "font-size", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex:-1
tabPanel:null
tagName:"DIV"
textContent:""
title:""
translate:true
__proto__:
HTMLDivElement
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Response object documentation corrections

Post by Scott Klement »

the pui.fieldName and pui.formatName attributes will tell you the field name that is bound to the "value" property. You didn't say, but I'm guessing that you don't have any fields bound to the "value" property, and this is why you're not seeing them.

You are also confusing a profound ui property with a DOM attribute. You are setting "winresponse" as a pui property, but trying to query it as a DOM attribute.

You are also setting winresponse and calling pui.click as a default on the widget settings rather than doing it in the widget itself. Surely that could be confusing when a programmer decides to use your widget and removes that code?

Perhaps you should just forget about the "winresponse" property and use the "value" property that is already available?
abhimanu21
New User
Posts: 10
Joined: Fri Jan 26, 2018 4:50 pm
First Name: Abhimanyu
Last Name: Gupta
Company Name: WinSupply
Contact:

Re: Response object documentation corrections

Post by abhimanu21 »

I see. My requirement is to have to the same widget multiple times on screen ((different image icons may be for different functionality). Each will have different RPG 'response' field (now 'value' field as you suggested) associated to it.

Just to add to what i was doing, i added 'wintest' to DOM attribute and querying for 'wintest' in DOM. Based on which widget DOM has 'wintest' attribute, i loop through all the widgets on screen and try to assign the 'winresponse' property value to that widgets bound RPG field.

To get the value in 'winresponse' property of clicked widget only, i added applyproperty to change the value in inline js.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now please suggest the way to resolve this problem where screen has multiple copies of same widget on screen and we need to identify which widget is clicked based on pui.click().

I am not following how do i set the default value to response or value field in widget itself to identify at run time which widget was clicked. i understand it can be done the default way if we are using the widget only once on screen. Please guide.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Response object documentation corrections

Post by Scott Klement »

the way you're doing it will work fine for multiple widgets on the screen. The only change is to use the "value" property instead of "winresponse".

I'd also move the "onclick" code to the internals of your widget instead of setting it as a property default.

But, I said all of that already.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Response object documentation corrections

Post by Scott Klement »

I modified your code to work the way I'd suggest making it work. please find it attached to this message.

Note: For this to work, you must set the display records "onsubmit" property to the following:

Code: Select all

WinSupply.fontAwesomeSubmit
And you must bind the "value" property to the RPG variable that is to be set to "1" if the icon is clicked.
Attachments
winfontawesome.js
(3.58 KiB) Downloaded 490 times
abhimanu21
New User
Posts: 10
Joined: Fri Jan 26, 2018 4:50 pm
First Name: Abhimanyu
Last Name: Gupta
Company Name: WinSupply
Contact:

Re: Response object documentation corrections

Post by abhimanu21 »

Thank you Scott. I was able to make my code work yesterday based on you inputs.

Your code looks more formatted than mine so will try with your code today. Thank you for all the inputs.
abhimanu21
New User
Posts: 10
Joined: Fri Jan 26, 2018 4:50 pm
First Name: Abhimanyu
Last Name: Gupta
Company Name: WinSupply
Contact:

Re: Response object documentation corrections

Post by abhimanu21 »

I need some more help with this custom widget.

Requirement is to,
1. Have a property on the widget (either existing or may be new property) where developer can enter some text.
2. The text entered under this property will need to be displayed next to the icon.
3. Entire custom widget and text should be clickable.

Here we are using Font Awesome icons to use as custom widgets. I am not able to figure out how to make this work. Can you please help with this.

Please see the attached code for reference.
CustomWidget.js
(3.32 KiB) Downloaded 242 times
abhimanu21
New User
Posts: 10
Joined: Fri Jan 26, 2018 4:50 pm
First Name: Abhimanyu
Last Name: Gupta
Company Name: WinSupply
Contact:

Re: Response object documentation corrections

Post by abhimanu21 »

Ok so finally i was able to make this work.

Need help with using the widgets on screen. I have created a display file which are using the new widgets. When i use the launch program from designer, widgets are displayed correctly on screen.

However when i run the WEB application and try to open the display file from menu, js files are not loading and widgets are not displayed on screen. I am not sure if we are missing anything .

JS files are stored in htdocs\profoundui\userdata\custom\widgets folder. Please suggest if i need to do any other setup?
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Response object documentation corrections

Post by Scott Klement »

How are you running your web application?
Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests