Welcome Serena Central users! CLICK HERE
The migration of the Serena Central community is currently underway. Be sure to read THIS MESSAGE to get your new login set up to access your account.
scotttmark Absent Member.
Absent Member.
604 views

Use JavaScript to dynamically insert a button on a form


Hi,

End goal: if a journal field has more than 5 entries, hide entries 5+ and show a 'Show/Hide' button that will toggle the visibility of the 5+ entries. Need this on both states and transitions.

Here is the js I have currently and everything works great.... in FireFox. In IE, the code runs without error and the 5+ entries get hidden but the button doesn't show up on the form so there isn't any way to get the hidden entries to show.

Any suggestions would be appreciated as I have tried online solutions like adding a fake class and setting the span.InnerHTML+="" to make IE render the button but nothing has made the button show up so far.

Thanks!

Update: when I pasted my code in here, half of it doesn't show up when I exit edit mode so I have attached a couple images of it. If there is a way that I should escape the code to get it to show, please let me know.


0 Likes
13 Replies
pmthompson1954 Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Can you create button in Composer & set it it call showorhide?
0 Likes
scotttmark Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Hey Paul,

Thanks for the response. I looked into that - the button from the Form palette but had some concerns and wasn't sure if it would work.

1. When adding it, it appears to force the user to choose a default onclick action for it (URL, Submit, etc) which makes it sound like I would need to find a way to override the default SBM behavior - something I was trying to avoid as I would rather this be as clean of a solution as possible.

2. I would need to add this button to every form and below every journal field which creates quite a bit of maintenance overhead vs being able to add the javascript file to every form and then being able to update the javascript in a single location.

To be completely honest, I would be thrilled if there is a way to make the current implementation work in IE, since the code works so well in FF and is easy to reuse.

If you do think the Composer button would work for this though, would you mind providing some more detail on how it would be tied to the showorhide function?

Thanks again
0 Likes
scotttmark Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Also, a lot of search results dealing with this talk about IE requiring the tbody element in the tables for dynamic elements to show up. But looking at the source, I can't find any table dealing with the section of html being looked at that is missing the tbody.
0 Likes
scotttmark Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Alright, figured out an alternative that isn't too much of a sacrifice. For some reason IE doesn't show a dynamically added button or hyperlink but it will show a paragraph. So I changed the code to create a paragraph with an onclick attribute, underline, and a pointer cursor to replace the button. Here is the updated code for anyone interested.

Thanks
0 Likes
bamos Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


I entered an ehancement in our system asking for this behavior by default. ENH228723
0 Likes
pmthompson1954 Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Fwiw, I'm following up with GetSatisfaction on the failure of code listings to post or display properly.
0 Likes
pmthompson1954 Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


In the posting box, click the" some HTML allowed". You can use <pre> and <code> HTML tags.
0 Likes
jeff_malin Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Scott - IE seems to be very strict about inserting things into the DOM, requiring proper HTML and failing silently, while FF/Chrome appear to be more tolerant. This might also be related to the fact that SBM doesn't set a DocType on its pages. You should try capturing the exact HTML which you're trying to insert and running it through the W3C HTML Validator (validator.w3.org) and resolving anything that it complains about, no matter how minor.

Brian, I think this is a great idea and have built something similar, I can share screenshots if you're interested. My implementation contains two buttons - show (5) more, and (show all) when there are more than 5 more hidden comments. Along with that I'm parsing the datestamps with a regular expression and transforming then into something more human-readable - such as "...15 minutes ago" or "Last Thursday at 10:40 AM", which makes it a lot quicker to scan comments and understand their timelines... E.g. how Facebook's activity stream works.
0 Likes
scotttmark Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Hey Jeff,

I wouldn't mind seeing the datestamp code - I like that idea.

And thanks for the info on validating the html for IE.

Thanks
0 Likes
scotttmark Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Ah, good to know
0 Likes
pmthompson1954 Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


GetSatisfaction tech support has found a problem with posting and will work with their developers.
0 Likes
jeff_malin Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Hi Scott - Here's the function that I use to convert plain dates into more readable. The only piece missing is on the case where the date is in the prior week, currently I'm returning in MM/DD/YYYY (US-Centric) format, whereas if you have international users you would likely want to read their local setting and use that format instead:

function dateToText(dateStr) {

// Converts plain string dates into more human-readable dates using easily understandable terms like Today, Yesterday, etc...

if (!isDate(dateStr)) {

return dateStr;

} else {

var dateVal = new Date(dateStr);

var currentDate = new Date();

var startof_today = new Date(currentDate.toDateString())

var startof_yesterday = new Date(currentDate.toDateString())

startof_yesterday.setDate(startof_today.getDate()-1);

var startof_lastweek = new Date(currentDate.toDateString())

startof_lastweek.setDate(startof_today.getDate()-6);

if (dateVal >= startof_today) {

return "Today at " + dateVal.toLocaleTimeString();

} else if (dateVal >= startof_yesterday) {

return "Yesterday at " + dateVal.toLocaleTimeString();

} else if (dateVal >= startof_lastweek) {

var myDays=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

return myDays[dateVal.getDay()] + " (" + (dateVal.getMonth() + 1) + "/" + dateVal.getDate() + ") at " + dateVal.toLocaleTimeString();

} else {

return dateStr;

}

return dateStr;

}

}
0 Likes
pmthompson1954 Absent Member.
Absent Member.

Re: Use JavaScript to dynamically insert a button on a form


Scott:

Another suggestion - use the SBM Javascript library API and jQuery.

jQuery tries very hard to take care of all the browser and browser-version dependent idiosyncrasies.
0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.