I have a requirement for an application in a Domino version 9.x deployment for a carousel like interface similar to what Netflix and others use to allow continuous scrolling. I got the jQuery jCarousel code working from here. But that lacks the pizzazz the user wants since the swiping feature is not available. I also used 100% computed HTML instead of being able to intersperse XPages controls within the carousel code.
So I found dojox/mobile/carousel (examples here) but all implementations, including the basic examples are not working well. The number of elements does not seem to be flexible and the positioning of them is much lower than I would think the should be. I fiddled with the CSS to see if I could fix things but have not found the right combination.
Here is the entire custom control I am using for this test (I captured the images from the demo and added them as image resources):
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
dojoParseOnLoad="true">
<xp:this.resources>
<xp:metaData
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</xp:metaData>
<xp:metaData
name="apple-mobile-web-app-capable"
content="yes">
</xp:metaData>
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/mobile/themes/iphone/iphone.css">
</xp:styleSheet>
<xp:dojoModule
name="dojox/mobile"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/parser"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/Carousel"></xp:dojoModule>
</xp:this.resources>
<xp:panel>Above it</xp:panel>
<div
id="carousel1"
data-dojo-type="dojox/mobile/Carousel"
data-dojo-props='height:"150px", navButton:false, numVisible:2, title:"Category"'>
<!-- View #1 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"dish1.jpg", value:"dish", headerText:"dish"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"glass1.jpg", value:"glass", headerText:"glass"'></div>
</div>
<!-- View #2 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"stone1.jpg", value:"stone", headerText:"stone"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"shell1.jpg", value:"shell", headerText:"shell"'></div>
</div>
</div>
<xp:panel>Below it</xp:panel>
</xp:view>
in the sample in the documentation it has this comment followed by the inclusion of a JavaScript file.
<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
Not having this step done may be my problem but I cannot see how to do that within the XPages environment.
The dojo carousel exists since 1.7 Notes 8.5.3 comes with 1.6 (i dont know the dojo version of Notes9), so you maby have to update your dojo or implement a newer dojo lib in your application.
I did a short experiment on it, i disabled the build in dojo adding xsp.client.script.libraries=none to my xsp.properties and importet the dojo 1.9 in my application under WEB-INF/dojo/... then add the dojo to my xPage as ClientSide script resource. As soon i finished this the programatic Example from the dojo homepage worked immediately with out bigger errors (forgot to change the image sources =) ..).
The problem when adding xsp.client.script.libraries=none to your xsp.properties is that you also disable the XSP. library and some other xPage features wich you have to rebuild using the newer dojo version.
I realy prefer using dojo over jquery but in this case If you dont want to update your dojo i recomend you to maby stay at the jquery Library for this or look for other solutions.
Related
I am currently working on generating a master page for a sharepoint instance. It is however giving some issues when attempting to convert over an ASP repeater
The following works in generating a repeated text:
<!--MS:<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">-->
<!--MS:<HeaderTemplate> -->
<!--ME:</HeaderTemplate> -->
<!--MS:<ItemTemplate> -->
<li>test</li>
<!--ME:</ItemTemplate> -->
<!--MS:<FooterTemplate> -->
<!--ME:</FooterTemplate> -->
<!--ME:</asp:Repeater> -->
<!--MS:<asp:SiteMapDataSource SiteMapProvider="CurrentNavigation" ShowStartingNode="false"
StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
EnableViewState="true" ID="selectedSiteMap" runat="server" /> -->
However the following does not work:
<!--MS:<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">-->
<!--MS:<HeaderTemplate> -->
<ul id="main_menu_ul" class="">
<!--ME:</HeaderTemplate> -->
<!--MS:<ItemTemplate> -->
<li><a href=<!--MS:"<%# Eval("Url")%>"--> class="link">
<!--MS:<%# Eval("Title")%>--></a></li>
<!--ME:</ItemTemplate> -->
<!--MS:<FooterTemplate> -->
</ul>
<!--ME:</FooterTemplate> -->
<!--ME:</asp:Repeater> -->
<!--MS:<asp:SiteMapDataSource SiteMapProvider="CurrentNavigation" ShowStartingNode="false"
StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
EnableViewState="true" ID="selectedSiteMap" runat="server" /> -->
So far I have identified the issue is 2 fold:
1. the converter is does not like the fact that the opening ul and closing ul dont exactly match
2. the converter does not like the eval tags at all.
Any help anyone could give to getting this repeater to work properly would be very helpful. Thank you
The other possibility is that you are manually uploading your master page (as opposed to deploying it using a feature). The <%# Eval("Url")%> tag is seen as server-side code, and it turns out that there is a security limitation that server-side code is not allowed in customized pages - in other words, ones that are unghosted.
So if you customize a master page using SharePoint designer, the new copy exists in the content database, and this is regarded as customized.
I hit this recently - deployed an aspx master page (with a repeater control in it) using a feature, download a copy, re-upload it (with no changes) and bang - error. Code blocks not allowed in this file.
As you're putting this in an html master page, you're probably just masking the real reason for the error. You could try adding an entry to the web.config (see, for example, this blog) to specify that your master page can have code blocks.
It might because You have opened
MS: before you Eval("") but there is no closing ME: after eval tag.
I cannot figure out how to change a text in the header section of my site. I am trying to do this in my custom module's theme. This is how my header looks like:
<header>
<div class="container">
<div class="row-fluid">
<div id="Logo"><h1>#WorkContext.CurrentSite.SiteName</h1></div>
<h3>[ We Know Business ]</h3>
<a class="btn btn-navbar btn-menuh" data-parent="#collapse-nav" data-target=".collapse-menuh">btn</a>
<a class="btn btn-navbar btn-search" data-parent="#collapse-nav" data-target=".collapse-search">btn</a>
</div>
</div>
</header>
I changed [We Know Business] to [We know Businesses] but the updated text is not coming up on any page of my site.
However, my main objective is to use HTML5 and Responsive compatibility in IE8 by injecting conditional CSS and js like this:
<!--[if lt IE 9]>
<script src="/themes/intrust/js/html5shiv.js"></script>
<![endif]-->
I cannot see the above snippet in "View Source" option.
The reason I changed the text only to check whether I am doing it at the right place or not. When it didn't work I turned Shape Tracing tool on to see what template is being used for the header. But could not highlight any part of the header at all!
Isn't Layout.cshtml of my custom theme liable to render the header section? If not, which template I have to look for?
I must be doing something wrong here but cannot figure out what! Please help!
NB: I tried resetting IIS several times but had no luck either.
This is a bit late but what you are looking for is overriding document.cshtml.Orchard has a default in the folder Orchard\src\Orchard.Web\Core\Shapes\Views folder. Copy the file document.cshtml to your theme and put the items that you want in the header section of this document.
Another hopefully simple issue from an xpages beginner.
I am trying to use the Navigator control from the Extension Library. No matter what I do with it, I cannot get it to render on any of the pages I try it on. Code is below. Thanks for any assistance.
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:navigator id="outline" expandable="true">
<xe:this.treeNodes>
<xe:pageTreeNode page="/bcbsarequirements.xsp" selection="/bcbsarequirements" label="BCBSA Requirements" role="navigation"/>
<xe:pageTreeNode page="/compliance.xsp" selection="/compliance" role="navigation" label="Compliance"/>
<xe:pageTreeNode page="/finance.xsp" selection="/finance" label="Finance" role="navigation"/>
</xe:this.treeNodes>
</xe:navigator>
</xp:view>
This will happen at least if your view tag is missing the extension library attribute. Make sure the view tag looks like this: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">. If the attribute is missing there is an error visible in the source.
Make sure there is no error in XPage source.
Make sure the application is built (sometimes project -> clean is needed).
Make sure extension library is checked in application properties (you should get errors if not).
Check for any error messages in the server console/log when loading the XPage on browser.
Do other extension library controls render for you? If not there is a problem in ExtLib installation.
Make sure your Designer and server have the same and preferably the latest (20121217) ExtLib version.
If you are using the Upgrade Pack then you can open an SPR with IBM.
I'm using primeface timeline .first my timeline shows just loading then its displaying after I include code
<form prepenId="false" >
<p:timeline value="#{bean.value} />
</form>
.but my issue is the timeline shows just focus date in starting...and i cannot scroll or move content of timeline.the timeline is displaying just same content which s starting of my timeline (starting with focus date).but cannot move ...to left n right...cannot view others . ruler appears but its not moving the content of timeline.
It's available zooming and navigate on timeline component default on primefaces extension. Be sure that you use newest version of "primefaces-extension" component instead of old "primefaces" timeline component. Primefaces transferred development of timeline to primefaces extension. Send your all of your bean and facelts code please.
But there is an other way to set the options of original timeline plugin which framework use.
Set widgetVar attribute of timeline component:
<pe:timeline id="timeline" value="#{bean.events}"
eventStyle="box"
widgetVar="timelineWidget">
Then put or run this javascript on your facelet page:
<script type="text/javascript">
timelineWidget.jq.timeline(timelineWidget.cfg.dataSource,{"zoomable":"true"});
</script>
With this method, also you can set other properties which is javascript plugin support. Primefaces-Extension provide limited attributes of plugin.
Hope It'll help.
I have a calendar web part in my SharePoint site which works fine in Firefox and IE but does not work in chrome browser.
This is the same situation i am facing.
http://answers.flyppdevportal.com/categories/sharepoint2010/sharepoint2010programming.aspx?ID=9dde800d-7ce0-4069-93d7-2adf2c53d94b
Any suggestions ?
One more thing to add here is that , I have a content Query web part which will rotate the Promotions using JQuery cycle plug in. It is on the same page where I have put the list and library web part with calendar Month view as a default view.
If I remove that CQWP with Promotions everything works fine but if it there it wont work
Any suggestions? I have checked for the Jquery conflicts but could not find any of them .
Thanks
I think that I have find the root cause of my problem
There is one CQWP placed on the same page with this Calendar view list.
This CQWP ha call to jquery cycle plugin which will cycle the content after some interval , due to this JQuery conflicts my calendar control is not working in chrome.
Whem I Remove this CQWP everything works like a charm!!!
1st, try to revert back to the OOB v4.master to see if the problem disappears. If it works as expected, this mean that your masterpage have some issue.
One of the most ridiculous bug in SP is that if you don't have the SiteAction control declared before the ribbon control, some javascript codes will fails.
In one of my custom master page, I have to create a second siteactions control, just before the ribbon control. I've put it into a invisible DIV to completely hide it from the user.
It ends with something like this :
<SharePoint:SPRibbon ID="SPRibbon1" runat="server" PlaceholderElementId="RibbonContainer"
CssFile="">
<SharePoint:SPRibbonPeripheralContent ID="SPRibbonPeripheralContent1" runat="server"
Location="TabRowLeft" CssClass="ms-siteactionscontainer s4-notdlg">
<!-- Here is the hidden site actions control -->
<div style="display: none">
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>"
ID="SiteActionsMenuMain" PrefixHtml="" SuffixHtml="" MenuNotVisibleHtml=" ">
<CustomTemplate>
</CustomTemplate>
</SharePoint:SiteActions>
</div>
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigation" runat="server" Visible="false">
<SharePoint:PopoutMenu
runat="server"
>
.... Removed for readability ....
</SharePoint:PopoutMenu>
<div class="s4-die">
<asp:ContentPlaceHolder ID="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
</SharePoint:SPRibbonPeripheralContent>
<SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowRight" ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg">
.... Removed for readability ....
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
For your information, this behavior is due to one the inner control of the site action (PublishingConsole if I'm right). This inner control will produces some javascript global variable declaration (language and one another). This global variables are required by the ribbon control to works as expected.