Sitecore: Get value of droplink in repeater - sitecore

I have the following;
<asp:Repeater runat="server" ID="Repeater">
<ItemTemplate>
<sc:image field="image from droplink" Item='<%# Container.DataItem %>' runat="server" />
</ItemTemplate>
"Image from droplink" is a droplink selected value (a Sitecore content item). Within this item, there is a field "Image" which is the actual media item i want the source of. So the above does not work, as this field just returns the GUID of the content item.
How do I get the image src from the Image field of the droplink selected item in the above repeater?

You'll need to populate the Item or Datasource property on the sc:Image tag with the actual item containing the Image field. Item would be an Item object, whereas Datasource can be an ID or path. I think the following should do it.
<sc:Image runat="server" Field="image field" Datasource="<%# ((Item)Container.DataItem)["droplink field"] %>" />

The following answer assumes that the droplink on the Context Item points to a Media Item. (Prior to questioner clarification). Might be useful for someone else.
You'll need to use an asp:Image and a OnItemDataBound handler in your code behind, and use e.Item.DataItem (where e is RepeaterItemEventArgs) to get the item being bound. Ensure e.ItemType is a ListItemType.Item. From there it will be something like...
var item = (Item)e.Item.DataItem;
var dropLink = new InternalLinkField(item.Fields["image from droplink"]);
var mediaItem = dropLink.TargetItem;
if (mediaItem != null)
{
var options = new MediaOptions { Height = 100, Width = 100 }; //change to your dimensions
var imageUrl = MediaManager.GetMediaUrl(new MediaItem(mediaItem), options);
var imageControl = e.Item.FindControl("myImageControlID"); //change to asp:Image ID
imageControl.ImageUrl = imageUrl;
imageControl.AlternateText = mediaItem.Alt;
}
If you are supporting Page Editor (I hope you are!), within a repeater you can use Edit Frames to allow editing of the image on each item. (Note that the linked example puts an edit frame around a whole ListView, whereas you'll want to place it within your Repeater and databind the Datasource property to the current item ID.)

Related

How to add ID to Raphael JS element on creation

I am working on the below demo. Why am I not able to add id sample to the object? I am trying to control the element style through css but it is not working
var paper = Raphael("container", 500, 300);
var dot = paper.circle(50, 50, 30).attr({
stroke: "#000",
"stroke-width": 5
}).data("id", "sample");
#sample{
fill:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>
The problem is data() doesn't refer to svg attributes on an element, but custom data on a Raphael element, that it can access.
If you want to set the id attribute, you would need to try one of the following...
set the 'id' within the attr({}) definition you are using (however, iirc some versions of Raphael don't work with that), if not you would need to do
dot.attr({ 'id', 'sample' }); // or try the following
dot.node.setAttribute('id', 'sample'); // or
dot.node.id = 'sample';

Changing menu type dynamically in ZURB Foundation

I have a HTML menu with ul and li tags and I want it to be either dropdown or drilldown type. Is there any way to reinitialize the ul tag with another type using Javascript?
From foundation docs: http://foundation.zurb.com/sites/docs/dropdown-menu.html
You can initialize your menu in javascript
var element = $('#myMenu')
var elem = new Foundation.Drilldown(element, options);
var elem = new Foundation.DropdownMenu(element, options);
Here's a fiddle showing how you can switch a menu between dropdown and drilldown: https://jsfiddle.net/genestd/8akhm8bn/
Note when initiation DropdownMenu after Drilldown, you need to remove the invisible class like this in the fiddle:
$("#mymenu>li>ul.invisible").removeClass("invisible");

Bind to a value that will be fetched from an API

I have an endpoint that returns a list of artists (json data).
And an endpoint that returns a specific property given an id.
What I would like to do is to iterate through all the artists and display one or more properties in the template to the user but the property should only be fetched from the API if it is bound in the template.
In my ArtistsRoute, I set the model to be all those artists fetched by calling getJSON...
I want, somehow to be able to fetch a property for an artist and display it (through binding).
The Properties map could be stored in the ArtistController maybe.
I could not find a good example for this. Any help is appreciated!
Template example:
Name is on the artist object itself, but the Properties object has been created manually. So in the ArtistController it could be initialized to empty:
Properties = {}
And then it sets Propertes['ShortName'] = to the fetched value.
<ul>
{{#each}}
<li>
{{Name}}
{{Properties.ShortName}}
<img {{bind-attr src=Properties.MainImage}} />
</li>
{{/each}}
</ul>
Should I use a function instead as a property or a Handlebars helper? Like:
{{Property this 'ShortName'}}
where 'this' is the ArtistController and 'ShortName' is the property to fetched. The property id can be calculated through the ArtistController and propertyName.
function(tag, propertyName) {
Ember.$.getJSON('/Properties/' + tag.Id + '_' + propertyName).then(function(response) {
var propertyValueToBind = response.Value; // This is the value I want to display in the template.
});
}
Then the Property function has to know when to rerender the template (once the property has been fetched from the API).
Firstly you'll want to generally avoid properties that are uppercase. They are usually considered global properties, and not in scope.
Ember lazy loads computed properties by default, so adding that functionality to a computed property would be an excellent way to go.
someProperty: function(){
var promise = Ember.$.getJSON('/Properties/buildupurl');
return Ember.ObjectProxy.extend(Ember.PromiseProxyMixin).create({
promise: promise
});
}.property()
Then in your template someProperty would be accessed like this
{{someProperty.value}}
And would be asynchronously populated.
Example: http://emberjs.jsbin.com/OxIDiVU/769/edit

How could I modify sharepoint 2013 list column title?

I want the same column display different title in different views with only one list.
So I append a jquery script in my view.aspx.
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript" src="/_layouts/15/Library/js/jquery-1.9.1.js"> </script>
​<script type="text/javascript">
$(document).ready(function(){
$('[id^=diidSort][id$=company]').text('com');
});
</script>
It works,but when I click column ascending or descending then refresh page. the column
title restore to original text. How could I fix it?
Since it is a SharePoint 2013 environment, the following approach is suggested:
Create rendering template in order to render the custom column title
in a List View
Update List View web part in View page
Template file
SharePoint 2013 introduces client side rendering framework (CSR) for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript.
The following example demonstrates how to render the custom title for Title column in List View:
(function () {
function preTaskFormRenderer(renderCtx) {
modifyHeaderData(renderCtx);
}
function modifyHeaderData(renderCtx)
{
var viewTitle = renderCtx.viewTitle;
var linkTitleField = renderCtx.ListSchema.Field[1];
linkTitleField.DisplayName = viewTitle + ':' + linkTitleField.DisplayName;
}
function registerRenderer()
{
var ctxForm = {};
ctxForm.Templates = {};
ctxForm.OnPreRender = preTaskFormRenderer;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
}
ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');
})();
How to apply changes
Upload the specified script (lets name it TaskForm.js) into
SharePoint Site Assets library
Open View page in edit mode and go to List View web part properties
Specify JS Link property located under Miscellaneous group:
~sitecollection/SiteAssets/TaskForm.js (see pic. 1)
Save changes and repeat steps 2-4 for every View page if needed
Fig 1. JS Link property
Result

How to get the content of joomla editor in joomla2.5 iframe Madal box

I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.