I'm new to ASP and definitely new to Kentico. but i am fairly moving along.
Anyway. i am building this layout where there is a hidden div element:
<div style="display: none;">
<cms:CMSWebPartZone ZoneID="someContentZoneHere" runat="server" />
</div>
The problem with this script is that is does not show the Web Part Zone on the Design Page and i cannot add a Data inside it. Si i need to remove the style only when it is on the CMSdesk.
i have been thinking to use if else to solve the problem, but i do not know what to compare?
<% if(site is not in CMSDESK || CMSSITEMANAGER) { %>
//with style attribute
<div style="display: none;">
<% }else{ %>
//no style attribute
<div>
<% } %>
or are there any other ways to do this.
The condition you are looking for is:
if(CMS.PortalEngine.PortalContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Edit &&
CMS.PortalEngine.PortalContext.ViewMode != CMS.PortalEngine.ViewModeEnum.Design)
You can also do it the other way round and check for CMS.PortalEngine.ViewModeEnum.LiveSite. Check the full list of possible values.
Related
I am looping over an array of objects, these objects contains links to images. Some of these images return with status 403 and do not display.
Here is what I have in ejs
<% Recipes.forEach(recipe => { %>
<div class="basis-2/12 min-w-max">
<% if (recipe.image) { %>
<img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="<%= recipe.image %>" />
<% } else { %>
<img class="w-60 h-40 object-cover bg-slate-100 rounded-xl" src="/images/placeholder.png" /> <% } %>
</div>
<% }) %>
The if (recipe.name) itself only check whether there is a link or not, which is always true.
How should I go for this?
This solution works, the recipe.image (in this case) must have a value of null
You'd have to actually fetch the image on the server before rendering the page, which would slow down the loading.
If using JavaScript on the client side is possible, consider implementing the fallback there. See for example this answer: https://stackoverflow.com/a/1588899/240963
<img
src="<%= recipe.image %>"
onerror='this.onerror = null; this.src="/images/placeholder.png"'
/>
Alternatively you could implement a proxy on the server, and serve the fallback in case the image on the origin is not found; useful package for this is for example: https://github.com/http-party/node-http-proxy
I'm trying to get display users name from mongodb and I figured out how to do so, but now I want to design it for the admin panel and I want to display each user in a separated div
"The code below it works fine with me, all I need to know is how to set each name in a div"
here is a snippet from the ejs code
<h4>
Users </h4>
<% for(let i=0; i<Users.length; i++) {%>
<ul> <li> <%= Users[i].name %></li></ul>
<% } %>
</div>
</div>
</div>`
I would like to use the off canvas sidebar in conjunction with my table. Im using node js express app and an ejs view engine to get dynamic values for my table. Im not really sure how I'd go about creating the off canvas side bar. Im guessing I would have to use an anchor tag with my <tbody> rows.
<% if (terms.length > 0) { %>
<% terms.forEach(term => { %>
<tbody>
<tr>
<th scope="row"><%= term.id %></th>
<td><%= term.term %></td>
<td><%= term.definition %></td>
</tr>
</tbody>
<% }) %>
<% } else { %>
<div class="alert alert-danger" role="alert">
There are no terms or definitions to view
</div>
<% } %>
Considering the above code, I want the user to be able to click on the term ,which is. <td><%= term.term %></td> then the sidebar appears with the term, id and definition nicely presented on the off canvas.
Any help would be appreciated
I recently had to work on an old codebase with this and I "solved" it by including the slider as a component on each loop, then I passed in the record I wanted to use in the slider.
In your case, you would do these:
Abstract the slider into it's own .ejs file
Update your table loop to include the slider:
<% terms.forEach(term => { %>
<%- include('./path-to-your-slider-component-ejs', { term } ); %>
Add an identifier to the data-bs-target used by offcanvas to target the slider you want to open up:
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#yourSliderId<%= term.unique_id %>" aria-controls="yourSliderId<%= term.unique_id %>">
View Term
</a>
In your slider file, accept the passed in term and attach the term.id to the ID used in targeting it for opening like:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="offcanvas offcanvas-end" style="width: 35%;" tabindex="-1" id="yourSliderId<%= term.unique_id %>" aria-labelledby="yourSliderId" aria-modal="true" role="dialog">
...
</div>
</div>
</div>
You can go ahead to render the remaining content as you see fit in this slider.
PS: This was the best workaround I could think of - given the situation -, hen it might not be the best approach so please consider the possible drawbacks this might have and whether using a frameworks like React or Vue might be a better way to go for your project.
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I created an app following this tutorial (without scaffolding).
After I create an item I can click on it and it shows me a big list of parameters. Like here: http://s15.postimage.org/j6at9koiz/parameters.png .
The code which does that is:
<% if (todos && todos.length) { %>
<% for (var i in todos) { %>
<div class="row todo-item">
<div class="span8">
<h3><%- linkTo(todos[i].title, todoPath(todos[i].id)) %></h3>
</div>
<div class="span4"><h3><i class="icon-list-alt"></i><%= todos[i].status; %></h3></div>
</div>
<% } %>
<% } %>
To be more specific, the following line is the one which displays the links with the titles which take me to the list of the parameters for each item:
<%- linkTo(todos[i].title, todoPath(todos[i].id)) %>
Can I do something to display only some of the parameters and not the entire list which is displayed now?
Thank you!
You need to add view files for todo resource. If you're scaffolding, then geddy creates them by default. But otherwise, you have to add view files for todo in app/views/todos.
View files
_form.html.ejs
edit/new form
add.html.ejs
new resource view
/todos/add
edit.html.ejs
edit view
/todos/:id/edit
index.html.ejs
index view
/todos
show.html.ejs
show individual resource
/todos/:id
You can edit them manually. For changing how a individual todo item should appear on /todos/:id route, edit show.html.ejs
<div class="hero-unit">
<%- linkTo('Edit this todo', editTodoPath(params.id), {class: 'btn pull-right'}); %>
<h3>Params</h3>
<ul>
<li>todo.title</li>
<li>todo.property1</li>
<li>todo.property2</li>
</ul>
</div>