I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor:"$themePrimary",
color:"$ms-color-themePrimary"
}
};
<Dropdown label='Select your List' styles={ dropdownStyles} placeholder='---Select an Option---' options={this.state.listNames}></Dropdown>
The above does not work. The dropdown items dont use the Primary color which is #a200ff.
As far as I know the "$ms-Bla--bla-bla" notation is only working for (statically) pre-processed fabric-ui files, there is no run-time processing of these variables in spfx. So, you may need to use the theme directly. For example, you could make your dropdownStyles a function instead of a constant. You receive the current theme in parameters then:
const dropdownStyles = (styleProps: IDropdownStyleProps): Partial<IDropdownStyles> => {
return {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor: styleProps.theme.palette.themePrimary,
color: styleProps.theme.palette.themePrimary
}
}
};
There are other options as well, like using <ThemeProvider> / useTheme pair for example, using "magic" scss rules like [theme: themePrimary, default: #0078d7] (which are pre-processed at runtime) , using window.__themeState__.theme variable
I'm working with compound graphs library cytoscape.js for some days and familiar with its demo and basic APIs.
But I wonder if it is possible to decorate a parent node with style like the following screenshoot.
The defaults style of parent node is just a rectangle frame. Is it possible to render it with a background coloured title ?
Any help is greatly appreciated.
I finally resolve my issue with the following snippet.
{
selector: ':parent',
style: {
'background-image': function(){
return "title.jpg";
},
'padding-top' : '25px',
'background-position-x' : '0',
'background-position-y' : '0',
'background-width' : '100%',
'background-height' : '25px',
'background-fit' : 'contain',
}
}
Use a background image for the coloured title.
I have collection
{
"_id" : 1,
"title" : "Title",
"description" : "<p>Text ...</p>",
}
I need to get the description in Angular.
But when I output this data, I get a string <p>Text ...</p> instead of a tag <p>
Try this:
<span [innerHtml]="yourObject.description"></span>
I have a Liferay-AUI databable, for which I would like to allow single row selection, and further invoke a script as each row is selected. The script would need to identify which row was just selected and take some action.
Here is an example of current implementation. Suggestions on how to add the above requirements would be appreciated.
<div id="productsTable"></div>
<aui:script use="datatable,datatable-sort,datatable-scroll,datatable-highlight,datatable-selection,liferay-portlet-url">
var roleColumns = [ {
label : 'Providing Role Name',
key : 'providerRoleName',
sortable : true,
allowHTML : true,
formatter : function(o) {
var renderURL = Liferay.PortletURL
.createURL('<%= productDetailUrl %>');
renderURL.setParameter('productId', o.data.productId);
return '<a href="' + renderURL.toString() + '">'
+ o.data.providerRoleName + '</a>';
}
}, {
label : 'Cardinality',
key : 'cardinality',
sortable : true
} ];
new A.DataTable({
columns : roleColumns,
rowSelect: 'mousedown',
data : <%=renderRequest.getAttribute("roles")%>,
scrollable : "xy",
height : "400px",
width : '100%',
sort : 'true',
highlightRows : true
}).plug(A.Plugin.DataTableSelection, {
selectRow : true
}).render('#productsTable');
</aui:script>
I have a strong suspicion this is not the "correct" way to do it - however I was able to isolate DOM node of the row being clicked on this this code.
<aui:script use="datatable,datatable-sort,datatable-scroll,datatable-highlight,datatable-selection,liferay-portlet-url">
var roleColumns = [ {
label : 'Providing Role Name',
key : 'providerRoleName',
sortable : true,
allowHTML : true,
formatter : function(o) {
var renderURL = Liferay.PortletURL
.createURL('<%= productDetailUrl %>');
renderURL.setParameter('productId', o.data.productId);
return '<a href="' + renderURL.toString() + '">'
+ o.data.providerRoleName + '</a>';
}
}, {
label : 'Cardinality',
key : 'cardinality',
sortable : true
} ];
new A.DataTable({
columns : roleColumns,
rowSelect: 'mousedown',
data : <%=renderRequest.getAttribute("roles")%>,
scrollable : "xy",
height : "400px",
width : '100%',
sort : 'true',
highlightRows : true
}).plug(A.Plugin.DataTableSelection, {
selectRow : true
}).render('#productsTable');
A.delegate('click', function(e) {
console.log(e.currentTarget.getDOMNode());
}, '#productsTable', 'tr', myDataTable);
</aui:script>
All is the same except for my addition at the bottoms
A.delegate('click', function(e) {
console.log(e.currentTarget.getDOMNode());
}, '#productsTable', 'tr', myDataTable);
You can also isolate the dataset
A.delegate('click', function(e) {
console.log(e.currentTarget.getData("yui3-record"));
}, '#productsTable', 'tr', myDataTable);
The purpose of this exercise has been to allow for master/detail display within the same page, where the detail changes as a row in the master table is selected. I chose to put a radio button in the first column of the table, as depicted below, and clicking on the radio buttons invokes an action method within the portlet to update row selection and associated detail.
var columns = [
{
label : ' ',
sortable : false,
allowHTML : true,
formatter : function(o) {
if (o.data.isSelected)
return '<img src="/html/icons/radiobutton-checked.png" width="15" height="15" border="0" />';
var renderURL = Liferay.PortletURL.createURL('<%= partnerDetailUrl %>');
renderURL.setParameter('productLineItemRoleId', o.data.id);
return '<img src="/html/icons/radiobutton-unchecked.png" width="15" height="15" border="0" />';
}
},
....
];
I understand the best solution is to use javascript to dynamically update only certain parts of the page, not to perform a form-post with each radio button click. But this works for now, and I can move on to more pressing issues ;).
Thanks,
Randy
I have hierarchical JSON structure that differs after every new JSON from the server side. Given my template, this does not adequately show model update.
After troubleshooting, I noticed the mapping plugin does not correctly map child elements(or perhaps I am doing it incorrectly)
I can also track the memory keeps growing for every update in the datamodel.
Any help will be greatly appreciated.
This simple test is up on JSFiddle http://jsfiddle.net/Bru5a/1/
Here is my view
<div id="view">
The behavior is different depending on the order you load the model.
First
Second
Third
<span data-bind="text: name"></span>
<div data-bind="if: $data.child">
<b data-bind="text: child.name"></b>
<div data-bind="if: child.sub">
<b data-bind="text: child.sub.name"></b>
</div>
</div>
</div>
Here is my Javascript:
var BaseModel = function(om) {
ko.mapping.fromJS(om, {}, this);
};
var resourceModel = null;
function applyJson(json) {
try {
if(resourceModel){
ko.mapping.fromJS(json, {} ,resourceModel);
} else {
resourceModel = new BaseModel(json);
ko.applyBindings(resourceModel, $("#view")[0]);
}
} catch(e) {
alert(e);
}
}
function loadFirst() {
var json = { "name" : "1",
"child" : {
"name": "Child One"
}
};
applyJson(json);
}
function loadSecond() {
var json = { "name" : "2" };
applyJson(json);
}
function loadThird() {
var json = { "name" : "3",
"child" : {
"name": "Child Three",
"sub" : {
"name" : "Third Sub Child"
}
}
};
applyJson(json);
}
$(document).ready(function () {
$("#second").click(function(){
loadSecond();
});
$("#third").click(function(){
loadThird();
});
$("#first").click(function(){
loadFirst();
});
});
What is happening in your case, is that knockout is behaving as designed.
To see what is happening, add the following line inside your outer div
<div data-bind="text: ko.toJSON($root)"></div>
You can see what is being bound in your view model.
To understand what is being displayed, Watch what is happening the to the viewmodel as you select the different links. As you update your model, you will see that once a property has been created, it remains there. This is by design of how the mapper works.
Next, you have to remember that ko.applyBindings is only being called ONE time. Therefore, the binding are only being applied one time to the properties that are in existence at the time the applyBindings is called. When you add properties to your viewmodel later, they will not automatically be bound to the data-bindings.
To make this example work, you will need to re-think your view model so that all the properties are present at the time you call apply bindings.
EDIT
I've edited your fiddle to show what I was talking about at http://jsfiddle.net/photo_tom/Bru5a/5/