Why do I get: cannot open file 'Documentation/workflow_accordion.html': No such file or directory - shinyapps

I am trying to add the shiny app into golem structure. Therefore, everything that I am asking here should be in line with golem structure.
Here is the problem:
I cannot add my html into a module. And that is why I get the following error:
cannot open file 'www/workflow_accordion.html': No such file or directory
Here is the module I have added to app_ui (make sure you see the golem structure here https://engineering-shiny.org/golem.html )
#' mod_workflows_ui
#'
#' #description A shiny Module.
#'
#' #param id,input,output,session Internal parameters for {shiny}.
#'
#' #noRd
#'
#' #importFrom shiny NS tagList
mod_workflows_ui <- function(id){
ns <- NS(id)
shiny::tabPanel(
"Workflows", icon = icon("list"),
div(
class = "container",
shinyLP::jumbotron(
"Workflows",
"How to use the Bioinformatics for the Bench apps to access specific datasets and answer biological questions",
button = FALSE
),
hr(),
includeHTML("Documentation/workflow_accordion.html"),
br(),
br(),
br()
)
)
tags$footer(
includeHTML("Documentation/footer.html")
)
}
#' mod_workflows_server
#'
#' #noRd
mod_workflows_server <- function(id){
ns <- session$ns
}
This module is added into several parts as per golem structure:
in app_server script as mod_workflows_ui("mod_workflows_ui_1")
in 02_dev - in dev folder as - golem::add_module(name = "workflow_app", with_test = TRUE)
After that I call in the mod_tutorials in app_ui file like this:
shiny::tabPanel("Workflow", icon = icon("graduation-cap"),mod_workflow_ui("mod_workflow_ui_1")),
And then I go int run_dev and just run the app.
Now the issue is that I get this error:
cannot open file 'Documentation/workflow_accordion.html': No such file or directory
What am I missing? Why does it do this and how I can solve it, I am open for other ways of solving this matter.

You must use app_sys to link your file:
includeHTML(app_sys("app", "www", "hello.html"))
When the application is launched, the path is evaluated in the context of the package and not in the context of the running application. Hence the need for a path to a package file.
I hope that's clear enough.
:)

Okay, I have 2 html's that I deal with above.
I will take only one example, the 'footer.html' since it is a bit harder to deal but because this is the exact pattern I have applied for the other html file.
But firstly, I have tried several ideas:
1. includeHTML("www/footer.html")
2. app_sys("app/www/footer.html")
Yet, none of these work. Apparently html files aren't specific to golem, according to #Colin Fay, as he mentioned here: https://github.com/ThinkR-open/golem/issues/890
Actually tried all his ideas and still, it did not work.
However,
what I have done was to take what was written in html and turn it into a module according to golem structure:
#' mod_footer_ui UI Function
#'
#' #description A shiny Module.
#'
#' #param id,input,output,session Internal parameters for {shiny}.
#'
#' #noRd
#'
#' #importFrom shiny NS tagList
mod_footer_ui <- function(id) {
ns <- NS(id)
tagList(
tags$footer(
HTML(
r"(
<div class="container">
<div class="row">
<div class="col-sm-3">
<img padding: 10px 10px; height="150px" src="www/logo_v4.png">
</div>
<div class="col-sm-3">
<h4>Links</h4>
<ul>
<li>goto.az/bftb</li>
<li>Workplace Group</li>
<li>Tutorial Recordings</li>
</ul>
</div>
<div class="col-sm-3">
<h4>About us</h4>
landing page was built by my name and other people's name. Please contact us with suggestions.
</div>
<div class="col-sm-3">
<h4>Support</h4>
<ul>
<li>Contact </li>
<li>Contact </li>
<li></li>
</ul>
</div>
</div>
</div>
<br>)
)"
)
)
)
}
#' mod_footer_server Server Functions
#'
#' #noRd
mod_footer_server <- function(id){
ns <- session$ns
}
Then adding these modules to golem scripts found in :
02_dev in dev folder as golem::add_module(name = "footer_app", with_test = TRUE)
app_server in R folder as mod_footer_ui("mod_footer_ui_1")
app_ui in R folder as tags$footer(mod_footer_ui("mod_footer_ui_1"))
Then run the script provided in golem run_dev and it works beautifully!

Related

MailChimp API - dynamic content - mc:repeatable + mc:edit

My email template has some intro text followed by a repeatable block [a picture + a button].
I would like to repeat this block some X times and each time have picture link and button link updated with new links.
Currently I am using this payload to edit one block, and it is working as intended. I have used this SO answer as a guideline.
var data = {
'template': {
'id': template_id,
'sections': {
'editbutton': '<a class="mcnButton " title="Get Profile" href="' + button1 + '" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;">GET DATA</a>',
'editimage': '<img alt="" src="' + image1 + '" width="564" style="max-width:564px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">'
}
}
};
What I am struggling is repeating this block and updating image and button link.
I am working in Google Apps Script but I guess the problem is independence of language.
Any help would be appreciated.
Thanks.
I do not think you need to use the mc:repeatable or the mc:variant at all. Use the single mc:edit="editbutton_and_editimage_items_list" MailChimp tag. Put there dynamically generated HTML <ul><li> list with your actual data via sections part of the payload you sent to the API.
E.g. your sections.editbutton_and_editimage_items_list JSON item in your var data = {..} object above would look like:
<ul>
<li>
<a class="mcnButton " href="' + button1 + '" style="...">GET DATA</a></li>
<img alt="" src="' + image1 + '" width="564" style="..." class="mcnImage">
</li>
<!-- Repeat the LI with different data as needed --!>
</ul>
After you successfully set the template content of your yet-not-sent campaign with the data above, use the API to send the campaign.

No frontend output of powermail form in gridelement - only cache-index

I am using a powermail form inside of a two-column gridelement. While outside of the gridelement, the form works finde, but as I soon as I pack it into a column, it doesn't get rendered in the frontend.
Instead I just get a cache-reference (something like this: '< !--INT_SCRIPT.bac5b8b4bd3180848642d7849f -- >' ). So obviously the problem is somehow related to the content being cached.
So my question is: Where can I get started on fixing this?
How can I tell the gridelement to output rendered content instead of the cache-hash? Or would I need to get into the powermail code?
Here's my grid setup, in case that is any help:
plugin.tx_gridelements_pi1.setup.2col {
outerWrap = <div class="row"> | </div>
outerWrap.preCObject < lib.stdheader
columns.default {
outerWrap = <div class="col col-xs-12 col-sm-6"> | </div>
renderObj =< tt_content
}
}
Have you check in witch order you include the static templates? Gridelements should be the last entry.
And do you have an output when you deleting the grid setup..?

using foundation 5 joyride with tabs

Is there a way to switch tabs with foundation 5 Joyride?
I have foundation tabs on the page and want Joyride to point elements on different tabs.
Like mentioned in the comment from Steven, you could use the callback either in the pre or post step callback function you activate the tab you need.
post_step_callback : function (){}, // A method to call after each step
pre_step_callback : function (){} // A method to call before each step
Hope this helps...
Here's what worked for me. I looked around and couldn't find anything useful, so wrote this. The hardest part was figuring out how to get the id of the target anchor. This was found buried in the 'this' object available to the callback.
$(this.$target)[0].id;
The 'content' class is used by foundation to identify the content to display when a tab is clicked. So traversing up the .parents tree finding the enclosing elements gives you the content tab(s) holding your link. And then of course you have to add an id to the <a> element of the tab you want to click. If you name it the same as your content div, with '-a' appended, you should be good to go.
html:
<dl class="tabs radius" data-tab id="my_tabs">
<dd class="active">Tab 1</dd>
<dd class="active">Tab 2</dd>
</dl>
<div class="tabs-content">
<div class="content" id="tab1">
<article id="joyride_stop1">...</article>
</div>
<div class="content" id="tab2">
<article id="joyride_stop2">...</article>
</div>
</div>
js:
$(document).ready(function() {
$(document).foundation('joyride', 'start', {
pre_step_callback: function(i, tip) {
var target = $(this.$target)[0].id;
if($('#' + target).parents('.content').length > 0) {
$('#' + target).parents('.content').each(function() {
var id = $(this).attr('id');
if($('#' + id).is(':visible') == false) {
$('#' + id + '-a').click();
}
});
}
}
});
});
This will work on any page, whether it contains tabs or not, so it can be universally included across a site.

TYPO3 - geting images from a folder using Typoscript

I try to read pics (for a slider) from a folder. I have a marker called ###SLIDER### and my images are in the fileadmin/sliders/ folder.
I would like to achieve the following output as in the template that I bought:
<div class="camera_wrap">
<div data-src="fileadmin/sliders/slider_1.jpg">
<div class="camera-caption fadeIn">Text_1</div>
</div>
<div data-src="fileadmin/sliders/slider_2.jpg">
<div class="camera-caption fadeIn">Text_2</div>
</div>
<div data-src="fileadmin/sliders/slider_3.jpg">
<div class="camera-caption fadeIn">Text_3</div>
</div>
</div>
How can I load the images from a folder using Typoscript and display it this way?
The following code will give you what you want but without the captions. It works in TYPO3 4.5.x. I'm not sure that it works in higher versions as the description of filelist in the current (as of 16/10/2013) manual is somewhat confusing so I don't know if something has changed in the newer versions.
YOUR_MARKER = TEXT
YOUR_MARKER {
filelist = fileadmin/sliders/
split {
token = ,
cObjNum = 1
1 {
current = 1
wrap = <div data-src="fileadmin/sliders/|"></div>
}
}
wrap = <div class="camera_wrap">|</div>
}
NOTE: This is a very simple example that presumes that all the images in the folder are already resized to appropriate dimensions and that all the files within the folder are images. To make it better, the first (1) object of the split might be set to be IMG_RESOURCE. This way it would check that only images are outputted and it would allow you to use GIFBUILDER to resize the images if needed.

boilerplate 4.0 - javascript function is not defined

I am using Boilerplate 4.0 with main.js being loaded at the bottom of the body tag. I am trying to write the footer as script to make updating the copyright year easier, i.e. in main.js vs every html file. The function reference in the html comes before main.js is loaded, so I keep getting:
"Uncaught ReferenceError: (function) is not defined"
I can load main.js before the footer section and everything works, but doesn't that defeat the purpose?
html code:
<footer id="page-footer">
<script src="js/footer.js"></script>
<h5>
<script>footera();</script>
<strong><script>footerb();</script></strong>
<script>footerc();</script>
</h5>
</footer>
main.js code:
function footera() {
document.write("Copyright© 2012, ");
}
function footerb() {
document.write("<name>, ");
}
function footerc() {
document.write("all rights reserved");
}
If you call a javascript function before the browser has created that function, you will get an error. So calling the script before you use the functions is the right way.
However, I wouldn't use document.write anyway. I would change the code of the tags. If you use querySelectors instead, you will actually want to put it at the very bottom.
let footertitle = document.querySelector(".footer-title");
let footerlink = document.querySelector(".footer-link");
let footersubtitle = document.querySelector(".footer-subtitle");
footertitle.innerHTML = "Copyright © 2012, ";
footerlink.innerHTML = ",";
footersubtitle.innerHTML = " all rights reserved";
.footer-link{font-weight:bold;}
<footer id="page-footer">
<h5>
<span class="footer-title"></span>
<a class="footer-link" href="main.html"></a>
<span class="footer-subtitle"></span>
</h5>
</footer>

Resources