I'd like to create a custom tag, containing a datepicker control. How can I pass all properties from the custom tag to the datepicker control?
The custom tag should look like this:
{^{mycustomdatepicker
aDate
label="Date"
dataFormat="yy-mm-dd"
dateFormat="dd.mm.yy"
_showOn="button"
_buttonImageOnly= true
_buttonText= "Choose middle date"
/}}
The template for the custom tag like this
<div>Caption: ~tagCtx.props.label</div>
{^{datepicker /}}
How do I pass all props thru to the datepicker control at once?
Note: I know, I could pass each prop on it's own, e.g.:
{^{datepicker dateFormat= ~tagCtx.props.dateFormat _showOn=~tagCtx.props._showOn ... /}}
It looks like what you need is to have your custom tag derive from the {{datepicker}} tag:
mycustomdatepicker: {
baseTag: "datepicker",
...
See Specifying tag inheritance: the baseTag option, and Custom datepicker tags.
Then, on your derived tag you can add additional UI by overriding the default template:
mycustomdatepicker: {
baseTag: "datepicker",
template: "<div>Caption: {^{:~tagCtx.props.label}}</div>"
+ "{^{include tmpl=#content/}}..."
}
See Rendering wrapped block content, and this sample.
By following that pattern you don't need to pass props and parameters through to a wrapped {{datapicker}}. The {^{include tmpl=#content/}} will render as the original datepicker did, but can have additional rendered content before and after...
It is also possible to use a render method for your derived tag, rather than overriding the template, along the lines of:
mycustomdatepicker: {
baseTag: "datepicker",
render: function(date) {
return "<div>Caption: " + this.tagCtx.props.label + "</div>"
+ this.tagCtx.render(date) + "...";
}
}
See this sample
Related
Hi I just created the ionic accordion dropdowns by following a tutorial blog link which used widgets for creating an accordion dropdowns, Below is the link of that blog.
http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/
updated: here is the my project demo link https://stackblitz.com/github/dSaif/search-accordion
Everything is working perfect, but i want to add Ion-searchbar at the top of the accordions sothat the dropdowns gets filter by inputing text.
please assist me how can i do that. Thank you.
You are going to have to create a variable in your homepage to store your filtered results. Then you need to have a filter function that will take the input from the search bar and filter your master list. Keep in mind you should not set the new variable to the master list, this could cause issues due to object referencing.
So you should have something like
in your html
<ion-searchbar placeholder="Search a name." [(ngModel)]="searchValue" (ionChange)="filterList()"></ion-searchbar>
In your ts file
searchValue: string = '';
filteredList: Array<{ name: string, description: string, image: string }> = this.technologies;
// function called in the html whenever you change the ion searchbar value
private filterList(){
//Make a variable so as to avoid any flashing on the screen if you set it to an empty array
const localFilteredList = []
this.technologies.forEach(currentItem => {
//here goes your search criteria, in the if statement
if(currentItem.name && currentItem.name.toLowerCase().includes(this.searchValue.toLowerCase())) {
localFilteredList.push(currentItem);
}
});
//finally set the global filter list to your newly filtered list
this.filteredList = localFilteredList;
}
You also need to make sure to reference the filterList variable instead of the current one you are referencing.
I render a jsrender template in template object.
var colorTmpl = {
"color": jQuery.templates("<span>{{:~val}}</span>"),
}
var jsrendertmpl = {};
jQuery.extend(jsrendertmpl, colorTmpl);
If I access the jsrendertmpl.colorTmpl.render() it will render the color template. If I include this tmpl template tag within other template like this
{colorArr: ["white", "blue", "black"]}
{{for colorArr tmpl="jsrendertmpl.colorTmpl"/}}
It will not include that subtemplate into parent template. So I add a custom tag to include this subtemplate within object
includetmpl: function(tmplname){
return Template.render(tmplVal, jObj);
},
If I include the subtemplate in parent template {{:~val}} cannot be recognised
Parent Template with customised include tag
{{for colorArr itemVar='~val'}}
{{includetmpl "color"}}
{{/for}}
Parent template without subtemplate (It works fine)
{{for colorArr itemVar='~val'}}
<span>{{:~val}}</span>
{{/for}}
Is there any way to access that value. I used a {{setvar}} and {{:~getvar}} for workaround but need a permanent solution.
Thanks in advance.
There are a few ways you can implement that scenario - i.e. to provide different templates based on a data parameter that you pass in.
For example you can pass in the template as a helper:
$.views.helpers("myTemplates", {
color: $.templates("<span>{{:}}</span>"),
colorVal: $.templates("<span>{{:~val}}</span>")
});
And use it as in
{{for colorArr tmpl=~myTemplates.color/}}
or if tmplVar is your chosen template: "color"
{{for colorArr tmpl=~myTemplates[tmplVar]/}}
You can also create a custom tag, as you suggest, in either of the following ways:
$.views.tags("includetmpl", {
init: function(tagCtx) {
this.template = myTemplates[tagCtx.props.template];
}
});
or
$.views.tags("includetmpl2", {
render: function(val) {
return myTemplates[this.tagCtx.props.template].render(val, this.ctx);
}
});
(Note how I pass the context also to my render function, in the second version, so that ~val will be available...)
Then use it as in the following:
{{for colorArr}}{{includetmpl template="color"/}}{{/for}}
or
{{for colorArr itemVar="~val"}}{{includetmpl template="colorVal"/}}{{/for}}
See https://jsfiddle.net/BorisMoore/coezx8xj/ for all of the above...
I will change the title of your question to make it clearer.
How to display form item label in Views exposed form instead of '- Any -'? To be more specific I use this code to replace select's default value text with custom text and want that custom text to be the label of that element:
function THEMENAME_form_views_exposed_form_alter(&$form, &$form_state) {
//dpm($form);
if ($form['#id'] == 'views-exposed-form-FORMID') {
$form['ITEMNAME']['#options']['All'] = t('My custom translatable text');
}
}
This works for custom text. What I want is to display its label instead of My custom translatable text with the simple code like:
$form['ITEMNAME']['#options']['All'] = $form['ITEMNAME']['#name'];
but have no luck on such and similar codes to work. According fo $dpm($form) output '#name', '#title' elements seem not to exist at all.
The goal is to have similar functionality of https://drupal.org/project/compact_forms or https://drupal.org/project/In-Field-Labels without another Javascript library (prefer to use couple PHP lines, please no JS solutions)
Your above code will work in case of select field but not for text field. If you need it to work for text fields you can try this
$form['ITEMNAME']['#attributes'] = array('placeholder' => array('My custom translatable text'));
or
$form['ITEMNAME']['#attributes'] = array('placeholder' =>$form['ITEMNAME']['#name']);
hope this helps you
I'm trying to write Typoscript that will configure the Typo3 Rich Text Editor to wrap a given element with more than one class.
In the project's TsConfig/Page/rte.txt file, I have:
RTE {
classes {
button {
name = Button
}
}
However, I'd like to create a wrapper that would give the element more than just a single class. The below code doesn't work, but illustrates what I'm trying to accomplish:
RTE {
classes {
button {
name = Button
}
button danger {
name = Dangerous Button
}
}
According to this article, this doesn't seem to be possible, but I thought I'd ask and see if someone out there got crafty with their Typoscript and was able to accomplish this.
I tried everything to handle styles for tables that way, but there is currently no way to handle more than one CSS-Class for a RTE style definition.
The only way to handle this, is creating new CSS classes and extend the available button styles via LESS or SCSS.
In TYPO3 7 you can use this following RTE configuration to use multiple classes. The magic happens in the class-definition with the attribute "required"
RTE {
default {
proc.allowedClasses := addToList(btn-dark)
buttons.link.properties.class.allowedClasses := addToList(btn-dark)
}
classes.btn-dark {
name = Dark-Button
requires = btn btn-small
}
classesAnchor.buttonDark {
class = btn-dark
type = page
}
}
Is it possible to call a controller method to render a template within a template?
Or is that totally the wrong aproach?
In the div container there is only a sting displayed but not the redered html from my productTable template.
The displayed string inside the <div class="products">:
SimpleResult(200, Map(Content-Type -> text/html; charset=utf-8))
Template:
#categories.map {cat =>
<div>some html</div>
<div class="products">#controller.Products.getByCatergoyId(cat.id)</div>
}
Controller:
public static Result getByCatergoyId(Long catId) {
List<Product> products = Product.find.where().eq("category.id", catId).findList();
return ok(views.html.display.productTable.render(products));
}
If you want to get the code from the productTable view your method shouldn't return a Result but just a String containing rendered code.... aaaannnyyyyway , there is definitely much better way for rendering sub-templates in Play, check the Tags section of the documentation it does exactly what you want directly from the view, of course you will need to pass a product object to it.
Just create tags package in your view package and add there your sub-template (responsible for rendering only pat of page) it behaves exactly the same as common template.