How does one use the Content field type in KeystoneJS? I've put the following in my index.js, following the example given in the link above:
keystone.createList('Todo', {
schemaDoc: 'A list of things which need to be done',
fields: {
name: {type: Text, schemaDoc: 'This is the thing you need to do'},
blip: {type: Text, schemaDoc: 'This is another thing'},
status: {type: Select, options: 'pending, processed'},
rating: { type: Stars, starCount: 5 }, body: {
type: Content,
blocks: [
Content.blocks.blockquote,
Content.blocks.image,
Content.blocks.link,
Content.blocks.orderedList,
Content.blocks.unorderedList,
Content.blocks.heading,
// CloudinaryImage.blocks.image,
],
},
},
But when I go to the front end and click on the '+' button there, it only offers me the option of inserting an image (see screenshot below)
What is it I'm supposed to be seeing? If I'm supposed to see more, what am I supposed to be doing? I don't see anything about 'blockquote', 'link', 'orderedList', etc....
Is this all superceded by the Wysiwyg editor? Or do they do different things?
you have to write some text and then select that text for text formatting items.
this is how it looks with all options on:
this is how it looks when I remove the extra formatting option (bare content field)
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I have several questions about Apostrophe CMS:
Is it possible to add a unique field type in apostrophe-pieces? I can't find a way to do this.
Edit: I noticed that I wasn't specific enough. I want to make sure that there can't be two instances in the database with the same value in an added field. It should be something like an additional id. Is there an option for this? Maybe something like:
addFields: [
{
name: 'secondId',
label: 'Second ID',
type: 'string',
required: true,
unique: true
}
]
I want to access the apostrophe-headless api and get a specific element by passing a certain value of one of the created field types of the correspondent piece in a GET-parameter. Is something like this possible?
For example:
Piece:
module.exports = {
extend: 'apostrophe-pieces',
name: 'article',
label: 'Article',
pluralLabel: 'Articles',
restApi: {
safeFor: 'manage'
},
addFields: [
{
name: 'title',
label: 'Name',
type: 'string',
required: true
},
{
name: 'author',
label: 'Author',
type: 'string',
required: true
}
]
};
Desired api call for getting all articles which have strored "Jon" as author:
http://example.com/api/v1/article?author=Jon
Thank you very much in advance!
Custom field types
You can add custom field types at project level by extending apostrophe-schemas and adding the proper definition. You'll need to add a converter for server-side sanitization and a populator for the front-end of the form field.
You can follow the examples in Apostrophe's schema module, linked are the functions defining a float
https://github.com/apostrophecms/apostrophe/blob/0bcd5faf84bc7b05c51de7331b17f5929794f524/lib/modules/apostrophe-schemas/index.js#L1367
https://github.com/apostrophecms/apostrophe/blob/0bcd5faf84bc7b05c51de7331b17f5929794f524/lib/modules/apostrophe-schemas/public/js/user.js#L991
You would add your definitions in your project level lib/modules/apostrophe-schemas's index.js and public/js/user.js respectively.
Filtering
You can search your piece index for a string like Jon by adding ?search=jon to your query but more likely you want to filter pieces by the value of a join.
If you had piece types article and authors, you could have a joinByOne field in article's schema that lets you relate that article to an author piece. Then, by enabling pieceFilters you could filter directly on those joined properties.
A complete rundown of piecesFilters can be found here https://apostrophecms.org/docs/tutorials/intermediate/cursors.html#filtering-joins-browsing-profiles-by-market
I think you'd also need to mark that filter as safe for api use in your apostrophe-headless configuration https://github.com/apostrophecms/apostrophe-headless#filtering-products
I have some styles that I need to apply to all DataTables buttons so that they match the rest of the buttons on my site. I can add that using the className option as below, but I'd like not to have to supply the same thing every time.
Manual example
$('#myTable').DataTable({
buttons: [
{
text: 'I look like a button',
className: 'icanhazdefalt'
}
]
})
I see in the docs that the default value is undefined. I couldn't find anywhere in the docs that you could override the default for this or other options. Is this possible? Something like:
$.fn.DataTable.Buttons.options.extend({
className: 'icanhazdefalt'
})
What I need is to be able to set the default for the plugin itself (rather than for a specific instance). Then all instances I create on the page from then on would have the default I specified. I can include the script that sets the default right after the plugin script (perhaps in a layout file) so that I never have to manually do anything to get all subsequent instances to have the default className (but still be able to override it by explicitly providing it as shown in the 'manual example' above).
Use:
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
Reference: https://datatables.net/reference/option/buttons.buttons.className
EDIT: There might be a better and simpler way of doing this but, this is what I came up at the moment.
//DataTable
var table= $("#myTable").DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'I look like a button'
},
{
text: 'I dont'
}
]
} );
//Add class to all buttons
$(table.buttons()).each(function(){
$($(this)[0]["node"]).addClass("sampleClass");
});
You can also change your button selection by giving a parameter for buttons().
See this link for that.
I want to realize the functionality that we can search the users' name by typing in the first character of their names. I need to use Javascript to create a custom html.
Is there anyone who has done this before could help me?
In the example from this repository, a user combobox Rally.ui.combobox.UserComboBox searches for matching values dynamically based on the first couple of characters.
This default functionality displays the expected values after the second character is entered.
var u = Ext.create('Rally.ui.combobox.UserComboBox',{
id: 'u',
project: project,
fieldLabel: 'select user',
listeners:{
ready: function(combobox){
this._onUserSelected(combobox.getRecord());
},
select: function(combobox){
this._onUserSelected(combobox.getRecord());
},
scope: this
}
});
this.add(u);
},
If you want to load all users (do not limit the selection to team members and editors of a specific project) you may use Rally.ui.combobox.Combobox instead of Rally.ui.combobox.UserComboBox, and set the model to User. But to workaround a default behavior where only the current user populates the combobox, use a filter that would filter in all users. In the example below ObjectID > 0 is used. This combobox will be populated by all users independently of the project picker. This fragment is not a part of a custom app example above:
{
xtype: 'rallycombobox',
fieldLabel: 'select project',
storeConfig: {
autoLoad: true,
model: 'User',
filters:[
{
property: 'ObjectID',
operator: '>',
value: 0
}
],
sorters: [
{
property: 'UserName',
direction: 'ASC'
}
]
}
}
You'll want to use the Web Services API. Here's how I would do it...
The API doesn't allow you to specify a placement of a character in the filter, but you can require that it exists somewhere in the name, that filter would look like:
[{
property : "FirstName",
operator : "contains",
value : "A" //Whatever letter you're looking to start with
}]
Now, once the store is loaded, use a second function to filter the records to only those which start with your character:
store.filterBy(function(item) {
return item.get("FirstName")[0] === "A";
});
Hope this helps :)
The code below is part of my controller function;
success: function (response) {
var text = response.responseText;
var result = Ext.decode(response.responseText);
var indexPanel = Ext.create('app.view.PersonDetails');
Ext.getCmp('mainView').push({
xtype:'person',
data: result
});
}
The code below, is the view, which i am passing values from my Controller function (above).
The code below, demonstrates hard coded data in that view (Hard coded text), but what i want to do is to display the data: result that i am passing from Controller function (above) to be displayed in the following view. How can i do this ?
Ext.define('app.view.UserInformation',{
extend:'Ext.Panel',
xtype:'person',
config: {
title:'Person details',
html:['Hard coded text'].join("")
}
});
UPDATE
The result contains several values like;
result.name, result.age. result.gender
I will be passing result to the other view.
1.) from the View, how can i add a button ? and wen the user clicks on that button how can i fetch the result.age field and do a if condition to check if the age is below 10 ?
2.) Imagine, if there's a field called, result.imageurl, how could i display the image on the other view (in a frame) ?
UPDATE2
Ext.getCmp('mainpanel').push({
title: 'Hello ' ,
xtype:'person'
});
Ext.getCmp('idOfTheView').setRecord(result.first_name);
Your question is Sencha Touch alone, not relevant to PhoneGap. :)
Suppose that your view has an id: view_id
Then in your controller function:
Ext.getCmp('view_id').setHtml(what you want to put into your view)
Updated answer:
Your question consists of several sub-questions. I'm afraid that the scope you're asking is too wide but I will answer the most important part.
(from my own application):
Ext.define('rs.view.ProductInfo', {
extend: 'Ext.Container',
xtype: 'ProductInfo',
id: 'product-info',
cls: 'product-info',
config: {
items: [
{
xtype: 'panel',
styleHtmlContent: true,
id: 'product-info-header',
tpl: [
'<div class="product-info-header">',
'<img src={image} width="100px" height="100px"/>',
'<h3>{name}</h3>',
'<h4>Price: {price}</h4>',
'<h4>Seller: {sellerUsername}</h4>',
'</div>',
],
},
],
}
});
Note that I defined a Model with attributes, {image},{name},{price},{sellerUsername}, then in the code snippet above, you can see that I use them in tpl config as if normal use in Ext.List (with store config). So how can I do it?
First, you have to define a model describing your result. obviously.
Second, define tpl in your view, I believe you can figure it out from the example above.
Finally, use this (assume that you've written the result received from server into your Model instance which I've mentioned in first step):
Ext.getCmp('your_view_id').setRecord(your_model_instance)
100% work warranty because I've used this many times. Hope it helps. Should you have any question, please leave a comment.