Kentico 7 create content placeholder in Portal Master to use in ASCX in inherited page - ascx

Working in Kentico 7 on an Ad-Hoc page that inherits from Portal Master. I want to insert some literal script or code right before the </body> tag in the rendered ad-hoc page.
I thought I'd have to do this by editing the portal master and adding the following:
<cms:CMSPagePlaceholder ID="plcBodyEnd" runat="server">
<LayoutTemplate>
</LayoutTemplate>
</cms:CMSPagePlaceholder>
and then in the layout of the Ad-Hoc page do this:
<cms:CMSContent runat="server" id="cntLeft" PagePlaceholderID="plcBodyEnd">
<script type="text/javascript">
ProviderConnections.Transparency.initializeWidget({ });
</script>
</cms:CMSContent>
This worked fine until I went to the design tab on the Ad-Hoc page, where I got the following error:
Object reference not set to an instance of an object.
I don't want to register script blocks. I just want to put text in the Ad-Hoc page that goes there before the </body> tag, which is controlled by Portal Master.
What am I doing wrong?

I'm not 100% sure what you are trying to achieve. Giving an example or attaching a screenshot would be very helpful.
Here are the ways of attaching JavaScript in Kentico:
Through portal engine:
Use JavaScript web part - that gives you an option of choosing where the script should be located
Programmatically from code-behind:
Use CMS.Helpers.ScriptHelper API (wrapper around ASP.NET's ClientScriptManager)
ScriptHelper.RegisterStartupScript() to put the script at the end of the page
ScriptHelper.RegisterClientScriptBlock() to put the script before page's elements
The difference between the two is well explained here.
Programmatically from ASPX markup:
Put your <script> block to a desired location in your .aspx / .ascx files
Evaluate a code-behind variable containing script
<asp:Button ID="btnOK" runat="server" Text="OK" />
<script type="text/javascript">
<%= fieldWithActualScript %>
</script>

Related

Mathjax in Github pages

I have started a new project in Github and as I will need to collaborate with people, I wanted to start a decent documentation. I would like to use Github Pages for this task, but the documentation will need to include many equations, as for instance https://wec-sim.github.io/WEC-Sim/theory.html.
I have read on-line on numerous posts that Mathjax provides a good tool to read equations on browsers and has been linked to Github pages. However, although I tried to follow many different strategies, I have not been able to get my Page to show any equations yet.
You can find my project at https://github.com/enricoande/uuv and the corresponding page at https://enricoande.github.io/uuv/. The page is built from https://github.com/enricoande/uuv/blob/master/docs/README.md.
Initially, I was not able to display equations at all, but could see the text in the Page. Now, I am not even able to see the page. This has happened after adding the file https://github.com/enricoande/uuv/blob/master/docs/_layouts/page.html which reads
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Is it possible that the reason why I can no longer see my page is that Mathjax is too slow (I have found comments on this regard on-line)? Otherwise, have you got suggestions on what I could do to fix the Page to display the equations?
As you can see I am a beginner with Github pages and html.
Any suggestion is well appreciated as I am now utterly stuck. Thank you for the help!
If I open the referenced JS file at https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML, I see
console.warn('WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips.')
So check https://www.mathjax.org/cdn-shutting-down/ for detailed migration tips.
Example solution
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...">
</script>
If you open the HTML source of your page, you'll notice that it contains nothing but the script tag.
This is expected since your page template is not actually a template -- for that it would have to contain {{ content }} or similar liquid templating tags so that it can pull content from the actual page.
For example, https://github.com/jekyll/jekyll/blob/master/docs/_layouts/page.html has
---
layout: default
---
<section class="standalone">
<div class="grid">
<div class="unit whole">
<article>
<h1>{{ page.title }}</h1>
{{ content }}
</article>
</div>
<div class="clear"></div>
</div>
</section>
You will then have to create an index.html file in your docs folder that starts with
---
layout: page
---
so that it pulls in the page template (and the script tag).
Try installing jekyll and generating the default site to evaluate good defaults; see the docs for more information on that. Usually, a script tag appears in a head, header or footer template.

Squarespace per page custom navigation links

So I've spent a day on Google, and trying bits of jquery/javascript to do what I'm looking to do and am officially stuck.
I'm building a site using Squarespace, with the Marquee theme applied. I would like to be able to add a custom link in the primary navigation to send users to an alternative language version of each specific page.
But, I'm struggling. Ive found solutions on here that should work, but I don't think I'm applying it right. Ive tried adding a single link to the navigation and using a script on each page (in the code injection point of the head section) point that link somewhere else.
This would mean I have a single link in the navigation (which is standard across the site) pointing users to whichever page I want...on a per page basis. I know there is a solution out there....just can't make it work!
The section I need the link to work from is:
<div id="desktopNav" data-content-field="navigation-mainNav" data-annotation-alignment="bottom left">
<nav class="main-nav" id="yui_3_17_2_1_1450478013910_660">
<div class="nav-wrapper" id="yui_3_17_2_1_1450478013910_659">
<ul class="cf" id="yui_3_17_2_1_1450478013910_658">
<li class="page-collection">
<span>Menu</span>
</li>
</ul>
</div>
</nav>
</div>
None of this can be edited directly though...
I was thinking something like this could work, but I cant work out how to apply it to my situation...
Change href value for a hyperlink
Any help, gratefully received!
I fixed it...using this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href*="original.site"]').attr('href', 'http://website.com');
});
</script>
It allows me to point a single link in the navigation (which cant be edited directly) to whatever I want it to go to.

How can Apache Wicket be used to make a single page web app?

I am trying to understand what kind of web applications Apache Wicket is suitable for, and it seems to be page based from what I have seen. How can it be used to make single page web apps as well?
At our company we have 3 SPA built on Wicket. They all work :) Basiclly our structure is:
<html>
<head>
</head>
<body>
<div wicket;id="menu">
<!-- navi links -->
</div>
<div wicket:id="main">
</div>
</body>
</html>
And we replace the main panel and it's inside panels effectivly getting an SPA.
Ajax support in Wicket 6 is very good.
Yes, its basically for page based webapps. So, it can also be used easily form single page web app.
I suggest just reading this short example of Hello world
After that, you can easily edit your equivalent of HelloWorld.html and HelloWorld.java to make really easy HTML in Java.

How to implement CRUD page in Alfresco Share with forms engine

I'm trying to find out the best way for using the forms engine within a CRUD functionality, providing the best user experience as possible.
I have created a custom Share page which will be used as site administration page. One of its functionalities is the management of members of the site, therefore it will allow the site administrator to search current members as well as view details, create, edit, or delete members. I have taken as model the out-of-the-box users management in the administration console as per of the functionality is pretty similar.
Users management in administration console doesn't use the form engine, but I would like to use it for user creation, edition and view of its properties. I'm wondering if somebody has implemented a similar functionality by taking advantage of the forms engine, as well as there already exists in Share a similar one but I found nothing.
After have spent some time reading about forms engine architecture, investigating and creating some pilots I came up with the following approaches:
Approach 1
To provide a better user experience, I would like to preserve the flow of the original administration console's users management which dynamically loads the required content of the page by performing AJAX requests returning JSON responses. The only way I presume I can do it is by performing asynchronous requests to the forms component and then add the returned HTML content into the current page. For example, a request to /share/service/components/form?itemKind=node&itemId=workspace%3A%2F%2FSpacesStore%2F3152987c-4cc9-49c4-b934-4ad293e73884&mode=create&htmlid=to_be_replaced_with_current_htmlid would return a form with the data of a user:
<style type="text/css" media="screen">
#import url("/share/res/yui/calendar/assets/calendar_aa6d35544845f9e37c2e63f30c3fc.css");
#import url("/share/res/components/object-finder/object-finder_6ace14eb15aeb2f5fc580252b2e234a.css");
#import url("/share/res/components/form/form_b0441863b8c8626acf9439fcf5430e3.css");
</style>
<script type="text/javascript" src="/share/res/components/form/form_759f5c75621bd2fdc25f232733606013.js"></script>
<script type="text/javascript" src="/share/res/components/form/date_c5fc1a135563584dfe4fa2ebfda6d7c7.js"></script>
<script type="text/javascript" src="/share/res/components/form/date-picker_867acd42dd913caf3fdf3b5fb915b6b.js"></script>
<script type="text/javascript" src="/share/res/components/form/period_6687cd14ce6f0519843823e177d338.js"></script>
<script type="text/javascript" src="/share/res/components/object-finder/object-finder_7613d05fefd03476b1aa73321a9de750.js"></script>
<script type="text/javascript" src="/share/res/components/form/rich-text_832156d1b3b4b7b336b9fcfd13a7e98.js"></script>
<script type="text/javascript" src="/share/res/components/form/content_9080c79dc38a9d8a6ce5405a1fc53f.js"></script>
<script type="text/javascript" src="/share/res/components/form/workflow/transitions_c015c3dc53be0a35a52e8d10f45cbd.js"></script>
<script type="text/javascript" src="/share/res/components/form/workflow/activiti-transitions_5da4db124822ea4a3062f14ab3402594.js"></script>
<script type="text/javascript" src="/share/res/components/form/jmx/operations_7cbe27c4e529dd693674fe2a8ff1bd.js"></script>
<script type="text/javascript">//<![CDATA[
//]]></script>
...
...
...
<div class="form-field">
<label for="whatever_prop_cm_firstName">First Name:<span class="mandatory-indicator">*</span></label>
<input id="whatever_prop_cm_firstName" name="prop_cm_firstName" tabindex="0"
type="text"
value="Administrator"
title="The person's first name"
/>
</div>
</div>
</div>
<div id="whatever-form-buttons" class="form-buttons">
<input id="whatever-form-submit" type="submit" value="Submit" />
</div>
</form>
</div>
Then that HTML response could be included in a wrapper div for example.
Approach 2
Create an additional page made up of three different regions. Each region will bind the forms component but with different initialization parameters: one region for view mode, another for create mode and another for edit mode. Something like:
<component>
<region-id>view-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>view</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>
<component>
<region-id>edit-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>edit</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>
<component>
<region-id>create-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>create</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>
Requests to this additional page would be performed from the search page providing the appropriate parameters for each scenario (view, create or update user). Regions could be shown or hidden using custom evaluators in the template-instance definition, for example.
I would like to hear from developers experienced with forms engine what's the better way of implementing such solution. Although I wasn't able to find any resource (extension, blog post, tutorial...) about a similar functionality made up with forms engine, I believe it is reasonable anybody have had to do anything similar before.
Approach 1 is quite good, but my best is Approach 2a :).
Your 2 is quite fine, but I won't define the Edit and Create as regions.
Check the Alfresco Share default code and you'll see (after some experience) that they define 1 region the view-user.
This is done because this view has the most logic in it. Like Searching/filtering and maybe some action on users.
The create-users and edit-users are mostly webscript(form) dialogs which just open to do a simple specific task.
I'd use Approach 1 in cases where you're defining grouped information.
Like you've got an integration with an issue tracker and you want to present multiple info on that entire page related to the tracker.
Still there is no wrong in any of your approaches, they're both fine and within the best practices of Alfresco Share.

Facebook Comment Plugin is not working with smarty template

The facebook comment plug in is not working with smarty template. The code I am using is given below
<div id="fb-root"></div> {literal}<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>{/literal} <fb:comments width="425"></fb:comments>
Please check this and let me know if there is any solution for this
Thanks In Advance
Rose
The issue is most likely because of the order in which this template loads on the page. You are most likely going to need to manually initialize the XFBML on your page for the tag to render. This is probably beyond what a template engine is going to be able to do. You are going to need to call FB.init(xfbml:true); after the template has loaded on the page. Also, change the script reference to
<script src="http://connect.facebook.net/en_US/all.js"></script>
The initilization call should occur only after the above script is loaded.
<script>
FB.init({xfbml:true});
</script?