EJS Template and row number

BFoster · Post by **BFoster** » Tue Apr 28, 2020 12:13 pm

I am developing a screen using an EJS Template. I can't use a normal grid because of the column field size required to hold the data, which is source code from a RPGLE Prototype member.

My thought is that while writing the subfile records to the table, a hidden field (using "style="display:none;") will contain the row number obtained from the loop that drives the load process and using the value in var i to populate the hidden field.

<% for (i = 0; i < S01.length; i++) { %>
<% } %>

The problem is that while I have a button in one of the columns to call a function with the intent of changing a bound variable on the control record, I need to pass the row number of the selected button to that function. What is the best approach to accomplish this?

BFoster · Post by **BFoster** » Tue Apr 28, 2020 1:39 pm

I think I might have it.

Each table row has a column for the button.
<td>
<input type="button" value="View Source" onclick="buttonClickEvent(<%=i%>)">
</td>

The row number is in the var i set by the load loop. So, each row's button column will contain this:
<input type="button" value="View Source" onclick="buttonClickEvent(0)"> //For Row 1 (0 indexed)
<input type="button" value="View Source" onclick="buttonClickEvent(1)"> //For Row 2
<input type="button" value="View Source" onclick="buttonClickEvent(2)"> //For Row 3

The JavaScript function is in profoundui\htdocs\profoundui\userdata\js\custom.js, otherwise the function wasn't being found during onclick.
The function has a parm for the row number. The next thing to see is the execution to test it, but I cannot seem to get the custom.js to reload. Started with a new browser for a new session without any luck. Ideas?

Scott Klement · Post by **Scott Klement** » Tue Apr 28, 2020 2:07 pm

What do you mean by "I can't get the custom.js to reload"? How is it being loaded in the first place? How do you know it won't reload?

BFoster · Post by **BFoster** » Tue Apr 28, 2020 2:27 pm

At first, I had the JS function in the HTML Container, but it was throwing an error about the function not being defined. I had the JS in the body for one test and in the head for the other. Same error for both.

Then I put the JS here: profoundui\htdocs\profoundui\userdata\js\custom.js named custom.js but then realized that wasn't the correct dir, but it loaded it from there. A colleague said the JS was supposed to go here: \profoundui\htdocs\profoundui\userdata\custom\js\custom.js. The JS in the other dir was deleted after moving it there.

Started a new browser but the older JS is still somehow being loaded.

Scott Klement · Post by **Scott Klement** » Tue Apr 28, 2020 3:01 pm

Thanks for the info.

1. You shouldn't be putting tags like <html>, <head> or <body> in an HTML container. An HTML container is simply a <div> tag that goes within the existing body of the page. (Remember, the whole screen is an HTML page, not just the part in the HTML container.) I suspect this is part of the problem you had previously when you tried to put the script inside the container.

2. Any file that ends in .js or .css within the '(YOUR-INSTANCE)/htdocs/profoundui/userdata/custom' directory (or any subdirectory beneath it) will load automatically in the Visual Designer, the designer's preview mode, URLs starting with /profoundui/start or /profoundui/auth/start, or Atrium's Rich Display launcher items. However, other means of loading (such as Genie) will not automatically load files from that location. To load it from Genie, you'll need to add a <script> tag into the skin's start.html file.

3. Web browsers cache files in order to try to reduce network traffic and therefore speed up load times as much as possible. So if you're sure that your changes were saved to the IFS, but you're not seeing them in the browser, it's most likely due to the cache. Opening a new tab will not affect whether it is (or isn't) cached. However, most browsers will reload everything instead of using the cache if you hold down shift while clicking the refresh/reload button. (For example, this works in both Firefox and Chrome, which are the two main browsers I use... I don't remember which other ones support it.) Alternately, you can completely clear the cache in the browser's settings, and then open/close the browser. (Holding down shift is a lot easier than clearing the cache and close/open the browser, so that's the way I always do it.) Note that reloading the page will disconnect you from your Profound UI session, so you'll have to sign back in again.

Or, an alternative to the advice given in #3 is to call the pui.refresh() API. This will reload the JavaScript and CSS files without disconnecting your Profound UI session, so it works for most cases. To do this, go to the console in the browser's development tools, and type: pui.refresh()

BFoster · Post by **BFoster** » Tue Apr 28, 2020 3:05 pm

The load of the js has been solved. The function being called is now in custom.js in the genie skins dir for our particular skin. It is executing correctly. When I press the button in the column for a row, the row number is put into a hidden field in the control record.

Code: Select all

function buttonClickEvent(rownbr) {
  document.getElementById("rowNbr").innerHTML = rownbr;
}

Scott Klement · Post by **Scott Klement** » Tue Apr 28, 2020 3:36 pm

If you are changing a bound value, please do not use the .innerHTML like that. There is more to Profound UI fields than just the DOM elements you see on the screen, there's a whole bunch of other stuff that we are tracking within our JavaScript code.

So if your goal is to set a bound value, please use pui.set() (or the older changeElementValue() function which is equivalent) to set the bound value.

Code: Select all

function buttonClickEvent(rownbr) {
  pui.set("rowNbr", rownbr);
}

Also... not sure exactly what you mean by "can't use a normal grid because of the column field size", but if you're referring to the DDS limitation that the entire subfile record cannot exceed 32k, then we also provide a way to provide larger values by overriding the subfile field with a different value. This is explained here: https://docs.profoundlogic.com/x/OAAyAw

Profound Logic Forums

EJS Template and row number

EJS Template and row number

Re: EJS Template and row number

Re: EJS Template and row number

Re: EJS Template and row number

Re: EJS Template and row number

Re: EJS Template and row number

Re: EJS Template and row number

Who is online