Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Options for including an expandable description in template

I'm having a hard time sorting through possible solutions. The more straight-forward, the better. I'd like to include clickable text or a text-only button that would (ideally) expand the roll template to show additional information. Very much like using the summary/details elements inside {{desc= }}. For example, in a repeating section of Skills, I have a button to display the Skill info in chat. Right now it displays the entire Skill description, which is often necessary but can be incredibly long and results in a lot of scrolling. Therefore I would much rather have a clickable bit in the template that would then display the entire description only when called for. Like this.... Or even a show/hide checkbox. If it is not really possible to expand the template in chat to display the additional content, or if it's pretty complicated, I've also considered having the clickable bit simply trigger a new instance of the template with just the skill description, like &{template:custom} {{desc=@{skill_desc}}}}. (I'm currently working with the default template and Jakob's Better Default Template.) It's quite possible this exists and I just don't know what to call something like this and it's all in an easy-to-follow wiki that I haven't found yet. My current solution is to have two separate buttons on the sheet, one to output the most basic skill info, and one to display the skill description. But rather than have to ask the player to please hit the description button for me, it'd be great if I could just trigger the description from inside the chat.
1645549405
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Unfortunately, this isn't possible. The only way is your idea to have a chat button to output the description as a separate chat message.
1645560594

Edited 1645561212
Joel
Pro
OK, thanks. Sorry to ask, but what is the correct syntax? Trying to trigger this from inside the template is what's messing me up, I think. I've been trying a dozen variations of {{[Show Skill Description](~ name_of_button_I_want_to_trigger)}}  I also tried putting the value of the desired roll into a hidden attribute named 'attr_displayskilldesc' and then tried @{displayskilldesc} but also no luck. I had hoped to be able to do this without having to add an Ability Macro or go through extra steps like hidden attributes. It seems like everything is already right there in the button 'roll_skilldesc', if I can just trigger it from within a template. // This is the button that the player can click on their sheet to output the skill description into chat, but I also // would like to be able to activate it from within chat, from inside a roll template. <button type="roll" name="roll_skilldesc" value="&{template:custom} {{title=@{name}}} {{desc=@{skill_description}}}"> Display Description in Chat </button> // Here is where the problem lies. This is the button they push to output their roll with their skill level and modifiers. I wanted the last // field in the template to have clickable text that would trigger the button above, 'roll_skilldesc'. <button type="roll" name="roll_skillroll" value="&{template:custom} {{title=@{name}}} {{Roll=[[1d100]]}} blah blah blah... {{[Show Skill Description](~foo)}}"> Roll versus Skill Level </button> // When I couldn't figure out how to trigger 'roll_skilldesc' from inside 'roll_skillroll', I also tried using a hidden input to call it up instead <input type="hidden" name="attr_displayskilldesc" value="&{template:custom} {{title=@{name}}} {{desc=@{skill_description}}}"> // I've tried a dozen different things in place of 'foo' with their various ~ and % and @ but cannot figure it out.
1645566905
Kraynic
Pro
Sheet Author
Another thing you could do to cut down how much room the chat output takes is cap the height the description section can take and have it scrollable beyond that.  I know the Pathfinder by Roll20 sheet does this.
1645568965

Edited 1645569327
Joel
Pro
Thanks, I may have to do that. Or go with my "two buttons on the sheet" solution, which is meh. Currently I'm just frustrated by not knowing why this won't work. I think it's because it's inside a repeating row. This test code works perfectly when the items are not in a repeating section. But as soon as I put them in a repeating section, it's broken. Feel free to try the code below. <div> This works fine outside of a repeating section. <br> <input name="attr_item" placeholder="Enter an item" type="text"> <input name="attr_color" placeholder="Enter its color" type="text"> <br> <button name="roll_showitem" value="&{template:default}{{item=@{item}}}" type="roll">Show the Item</button> <br> <button name="roll_showcolor" value="&{template:default}{{color=@{color}}}" type="roll">Show the Color</button> <br> <button name="roll_testbutton" value="&{template:default}{{item=@{item}}} {{[Show the Color](~selected|showcolor)}}" type="roll">Test Button</button> </div> <hr> <div> But now let's try it from within a repeating section. <br> Add a row and fill it out, then test the buttons. <div> <fieldset class="repeating_stuff"> <input name="attr_repitem" placeholder="Enter an item" type="text"> <input name="attr_repcolor" placeholder="Enter its color" type="text"> <br> <button name="roll_repshowitem" value="&{template:default}{{item=@{repitem}}}" type="roll">Show the Item</button> <br> <button name="roll_repshowcolor" value="&{template:default}{{color=@{repcolor}}}" type="roll">Show the Color</button> <br> <button name="roll_reptestbutton" value="&{template:default}{{item=@{repitem}}} {{[Show the Color](~selected|repshowcolor)}}" type="roll">Test Button</button> </fieldset> </div> </div> I wonder if I need to tell it which rowID the button I'm trying to target is in. But I want it to be whichever rowID the test button originated in. Not sure how to do that. Maybe I need the equivalent of @{this_row}, lol. I ran into a somewhat similar problem before when I first started using repeating rows, but the answer that time was to stop trying to specify a row. That does not seem to be the answer this time.
1645570313
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Yep, for buttons, you always have to specify the row ID. This requires you to construct the button call via sheetworker.
Arg.
1645630832

Edited 1645631358
Joel
Pro
This is well above my paygrade. Is there a wiki specifically about constructing a button call via sheetworker? Google-fu is not finding anything with those words, and my attempts to cobble together things from the snippets and old posts are not working. If it's very simple (when you know what you're doing) and you want to just give an example, I think if we use the example below I will be able to extrapolate it to everything I need on my sheet without asking a bunch of additional dumb questions. To recap: the issue here is how to get the third button (roll_testbutton) to have a clickable bit in chat ([Show the Color]) that will then trigger the second button (roll_showcolor) to display in chat. <div> <fieldset class="repeating_stuff"> <input name="attr_item" placeholder="Enter an item" type="text"> <input name="attr_color" placeholder="Enter its color" type="text"> <br> <button name="roll_showitem" value="&{template:default}{{item=@{item}}}" type="roll">Show the Item</button> <button name="roll_showcolor" value="&{template:default}{{color=@{color}}}" type="roll">Show the Color</button> <button name="roll_testbutton" value="&{template:default}{{item=@{item}}} {{[Show the Color](~showcolor)}}" type="roll">Test Button</button> <hr> </fieldset> <div style="width:450px;"> <p>Press the Test Button, then click its in-chat button to show the color. It needs to know the row, which needs to be done via sheetowrker, but I have absolutely no idea how to do that on either the HTML side or the script side. There will of course be multiple repeating rows, so it needs to do it for each row. Not sure which 'on' events should trigger the function.</p> <p>If you can get this working and show me the HTML and the script, I think I can figure out how to apply it to all my needs on my custom sheet. Thanks a million. Twenty million!, why not? Plus, think of all the gratitude of the citizens of the United Planetary Federation! That's gotta be worth something!</p> </div> </div>
1645635067

Edited 1645635498
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
So, to do this there's a few things that need to be setup in the code: an input to store the button call since we can't edit roll button values A sheetworker that will trigger on changes to character name, changes to the repeating section, and sheet opened. This looks like: <div> <fieldset class="repeating_stuff"> <input name="attr_item" placeholder="Enter an item" type="text"> <input name="attr_color" placeholder="Enter its color" type="text"> <br> <button name="roll_showitem" value="&{template:default}{{item=@{item}}}" type="roll">Show the Item</button> <br> <button name="roll_showcolor" value="&{template:default}{{color=@{color}}}" type="roll">Show the Color</button> <br> <input type="hidden" name="attr_color_button" value=""> <button name="roll_testbutton" value="&{template:default}{{item=@{item}}} {{@{color_button}}}" type="roll">Test Button</button> <br> <div style="width:450px;"> <p>Press the Test Button, then click its in-chat button to show the color. It needs to know the row, which needs to be done via sheetowrker, but I have absolutely no idea how to do that on either the HTML side or the script side. There will of course be multiple repeating rows, so it needs to do it for each row. Not sure which 'on' events should trigger the function.</p> <p>If you can get this working and show me the HTML and the script, I think I can figure out how to apply it to all my needs on my custom sheet. Thanks a million. Twenty million!, why not? Plus, think of all the gratitude of the citizens of the United Planetary Federation! That's gotta be worth something!</p> </div> <hr> </fieldset> </div> <script type="text/worker"> const setButtonCalls = function(event){ getSectionIDs('repeating_stuff',(idArray)=>{ getAttrs(['character_name'],(attributes)=>{ const setObj = idArray.reduce((memo,id)=>{ memo[`repeating_stuff_${id}_color_button`] = `[Show the Color](~${attributes.character_name}|repeating_stuff_${id}_showcolor)`; return memo; },{}); setAttrs(setObj,{silent:true}); }); }); }; on('sheet:opened change:character_name change:repeating_stuff',setButtonCalls); </script> The only changes that were made to the html were to change  {{[Show the Color](~showcolor)}}  to  {{@{color_button}}} , and add a hidden attribute called  color_button . The script takes care of the rest. EDIT: Note that this could also be handled via CRP, but that will require bigger changes to your existing HTML and need a more in depth script. EDIT 2: This is a shotgun solution, but can be made more specific by separating out the repeating section change listener to only affect the repeating row. The script would look like this: const parseTriggerName = function(string){ let match = string.match(/(?:(repeating_[^_]+)_([^_]+)_)?(.+)/); match.shift(); return match; }; const setButtonCall = function(event){ const [,id] = parseTriggerName(event.sourceAttribute); getAttrs(['character_name'],(attributes)=>{ setObj = {}; setObj[`repeating_stuff_${id}_color_button`] = createButton(attributes.character_name,id); setAttrs(setObj,{silent:true}); }); }; const setButtonCalls = function(event){ getSectionIDs('repeating_stuff',(idArray)=>{ getAttrs(['character_name'],(attributes)=>{ const setObj = idArray.reduce((memo,id)=>{ memo[`repeating_stuff_${id}_color_button`] = createButton(attributes.character_name,id); return memo; },{}); setAttrs(setObj,{silent:true}); }); }); }; const createButton = function(characterName,id){ return `[Show the Color](~${characterName}|repeating_stuff_${id}_showcolor)`; }; on('sheet:opened change:character_name',setButtonCalls); on('change:repeating_stuff',setButtonCall);
1645645390

Edited 1645645429
Joel
Pro
Slam dunk!  Works perfectly, even after I got my hands on it. Thank you so much, Scott! I owe you so many coffees and/or beers.
1645649520

Edited 1645650002
Joel
Pro
I don't suppose there's a way to put a backtick in the constructed button to get rid of the in-chat button styling?&nbsp; <a href="https://wiki.roll20.net/Chat_Menus#Change_Button_Looks" rel="nofollow">https://wiki.roll20.net/Chat_Menus#Change_Button_Looks</a> I've tried a dozen variations of double-backticks with spaces and tried variations of &amp;#96; but the ones that do get rid of the styling also break the button.
Maybe the backtick trick doesn't work any more. Even if I manually enter it with a backtick, it breaks the button.
1645651548
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The better way is just to style them using the sheet's ability to style roll templates. See the wiki for details.
ok thanks I just finished doing that, lol. I was 5 minutes too slow .sheet-rolltemplate-custom a[href^='!'],.sheet-rolltemplate-custom a[href^='~']{ &nbsp; &nbsp; background-color:transparent; &nbsp; &nbsp; border:0; &nbsp; &nbsp; color:#ce0f69; &nbsp; &nbsp; display:inline; &nbsp; &nbsp; padding:0; &nbsp; &nbsp;&nbsp; }