All,
In messing with the new cards found in 2.0p5, I noticed there is no longer a template available to alter the header or the content of the actual card.
Can someone confirm this is not available, just want to make sure I am not missing it anywhere...
There really is no way to alter the display of the card?
Just for clarity of the post, in 2.0p2 you could do a buildContent function or buildHeader function inside Ext.define of the Card.
The card no longer has a template that you can modify directly, however you can create a custom CardContent plugin to display custom html:
Ext.define('Rally.ui.cardboard.plugin.MyCardContent', {
alias: 'plugin.rallymycardcontent',
extend: 'Rally.ui.cardboard.plugin.CardContent',
getHtml: function() {
var html = this.callParent(arguments);
return html + '<span>mycontent</span>';
}
});
Then configure your CardBoard to use the custom plugin:
Ext.create('Rally.ui.cardboard.CardBoard', {
types: ['User Story', 'Defect'],
attribute: "ScheduleState",
fieldNames: ['Tasks'], // display task information inline on card
cardConfig: {
// overriding plugins to add the custom plugin
// be sure to include the default plugins.
plugins: [
{ptype: 'rallycardheader'},
{ptype: 'rallymycardcontent'},
{ptype: 'rallycardpopover'}
]
}
});
Related
I'm using Sanity.io, GatsbyJS 3.x
Watch mode works great when you update content in the CMS, except for when the content you edit is part of a referenced schema of type 'document'.
Put another way, changes made to a document referenced by another document will not re-render the page despite having watch mode on and configured properly.
For example, here is a snippet from my Page schema.
...
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: 'reference',
to: [
{ type: 'nav' },
{ type: 'section' },
{ type: 'footer' }
]
}
],
},
...
The above schema references a
nav schema
section schema
footer schema
Each of these are type 'document'.
See the example below.
export default {
type: 'document',
name: 'section',
title: 'Page Sections',
fields: [
{
name: 'meta',
title: 'Section Meta Data',
type: 'meta'
},
...
I want to reference a document, rather than an object, because I need to use the content created based on these schemas to be re-used in throughout the application.
Finally, I've configured the source plugin correctly for watch mode.
Gatsby Config is set properly
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdfasdf`,
dataset: `template`,
watchMode: true,
overlayDrafts: true,
token: process.env.MY_SANITY_TOKEN,
},
},
In the CMS / Studio, when you edit one of the fields, you can see Gatsby re-compile in dev mode from the terminal. However, the page does not auto reload and display the changes made to the referenced document.
I've tried reloading the page with the reload button and via hard refresh, the changes do not render.
The only way to render the changes is to go back to the CMS and edit a field on the main “Page” document. Then it refreshes immediately.
Am I doing something wrong? Is this expected behavior? Is there a way to get this to work?
For those that run across this issue, I was able to answer my own question. I hope this saves you the day's it took me to find a solution.
Solution TLDR
You need to explicitly query the referenced document in order for watch mode to work properly.
Details with Examples
Summary
The gatsby-source-sanity plugin provides convenience queries that start with _raw for array types. When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly. This may have to do with how the plugin sets up listeners and I don't know if this is a bug or a feature.
Example
My Page Document has the following schema
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: "reference",
to: [
{ type: "nav" },
{ type: 'section' },
],
},
],
},
The section is a reference to a section document.
{ type: 'section' }
The reason I'm not using an object is because I want the page sections to be re-usable on multiple pages.
Assuming you have watch mode enabled properly in your gatsby-config.js file, watch mode, like so...
// gatsby-config.js
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdf123sg`,
dataset: `datasetname`,
watchMode: true,
overlayDrafts: true,
token: process.env.SANITY_TOKEN,
},
},
Then you should see the following behavior:
listen for document/content updates
re-run queries, update the data, hot-reload the page
You'll see the following scroll in your terminal window.
success Re-building development bundle - 1.371s
success building schema - 0.420s
success createPages - 0.020s
info Total nodes: 64, SitePage nodes: 9 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.081s
success onPreExtractQueries - 0.006s
success extract queries from components - 0.223s
success write out requires - 0.002s
success run page queries - 0.010s - 1/1 99.82/s
This works great if you are querying the main document or any referenced objects. However, if you are querying any references to another document then there is one gotcha you need to be aware of.
The Gotcha
When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly.
Example: This Query will NOT work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
}
`
Example: This query WILL Work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
content {
... on SanitySection {
id
}
}
}
`
This additional query is the key
Here is where I am explicitly querying the document that is being referenced in the 'content' array.
content {
... on SanitySection {
id
}
}
You don't actually need to use the data that results from that query, you simply need to include this in your query.
My guess is that this informs the gatsby-source-sanity plugin to set up a listener, whereas the _rawContent fragment does not.
Not sure if this is a feature, bug, or just expected behavior. At the time of writing the versions were as follows.
"gatsby": "3.5.1",
"gatsby-source-sanity": "^7.0.0",
I have done a custom action. I can see the action in documentary library but i canot see it on faceted search result page.
<action id="custom-action" type="javascript" label="actions.custom.action">
<param name="function">onCustomActionlick</param>
</action>
So I went in the aikau-1.0.8.1.jar\META-INF\js\aikau\1.0.8.1\alfresco\renderers\_ActionsMixin.js file.
I see that we do a test to determine if action is allowed in this file :
if (this.filterActions === false || AlfArray.arrayContains(this.allowedActions, action.id))
On firebug i see that my costum action is not in the allowedActions object. My question is why ?
I think that actions wich have not permission are always allowed to all users. Am I right ?
What can i do to allow this action et make it visible on faceted search result page?
Thank you in advance.
You need to write an extension module which is described here: https://forums.alfresco.com/comment/159331#comment-159331.
In the JavaScript code you need to get the widget id of MERGED_ACTIONS and add your customAction to the array of allowdActions and define it in CustomActions.
This is the Aikau code from the link, probably it has been updated in the newer Alfresco version. So you need to extend this within your extension module.
You can probably just use org\alfresco\share\pages\faceted-search as your <sourcePackageRoot> in the module.
widgets: [{
id: "MERGED_ACTIONS",
name: "alfresco/renderers/Actions",
config: {
filterActions: true,
mergeActions: true,
allowedActions: ["folder-manage-rules", "folder-download", "folder-view-details", "CUSTOM3"],
customActions: [{
id: "CUSTOM3",
label: "Custom Action 3",
icon: "document-delete",
index: "10",
publishTopic: "DELETE_ACTION_TOPIC",
type: "javascript"
}],
widgetsForActions: [{
name: "alfresco/renderers/actions/ManageAspects"
}]
}
}]
The Document Library (at least up until Alfresco Share 5.1) is built with YUI, whereas the search page is built using Aikau. At the time of writing there is not yet parity of action handling between the search page and the Document Library, and the process of adding actions is very different.
In order to get your custom action to display in the faceted search page you'll need to do a couple of things:
Extend the search page to update the configuration for the "alfresco/search/AlfSearchResult" (it has the id "FCTSRCH_SEARCH_RESULT") to add your custom actions to the "additionalDocumentAndFolderActions" array (see http://dev.alfresco.com/resource/docs/aikau-jsdoc/AlfSearchResult.html)
Your custom action will publish a topic, so you need to create a new service to subscribe to that topic to perform the action. You will need to further extend the faceted search page so that your service is included on the page.
I'm paraphrasing from our latest blog the method we've used for this.
Our use case was we had existing actions in the document library view we didn't want to have to recreate, with standard configuration xml.
The first step is to create a Share Extension Module to add a Javascript controller in web-extensions/site-data/extensions/example.xml:
<extension>
<modules>
<module>
<id>Example Service</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.pages.faceted-search</targetPackageRoot>
<sourcePackageRoot>com.parashift.example</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
This will load some extra javascript, allowing you to adjust the widget config.
Create a file in web-extension/site-webscripts/com/parashift/example/faceted-search.get.js (or whatever package name you've used in sourcePackageRoot), add in a file called faceted-search.get.js with the following contents:
var searchResultPage = widgetUtils.findObject(model.jsonModel.widgets, "id", "FCTSRCH_SEARCH_RESULT");
if(searchResultPage != null) {
searchResultPage.config = {
enableContextMenu : false,
mergeActions : true,
additionalDocumentAndFolderActions : ["example-action"]
}
}
model.jsonModel.widgets.push({
id: "EXAMPLE_LISTENER",
name: "parashift/action/example"
});
This will:
Add example-action to the list of actions in the search results. This should already be a configured action in some share-config.xml file.
Add a new listener widget for you to listen to when the action button is clicked.
Add a file for your listener widget: META-INF/parashift/action/example.js
define(["dojo/_base/declare",
"dijit/_WidgetBase",
"alfresco/core/Core"
],
function(declare, _Widget, Core) {
return declare([_Widget, Core], {
postCreate: function () {
this.alfSubscribe("ALF_SINGLE_DOCUMENT_ACTION_REQUEST", lang.hitch(this, this._onPayloadReceive));
},
_onPayloadReceive: function (payload) {
if(payload.action.id == "example-action") {
this.alfLog("log", "Received action, handling accordingly");
.......
}
}
});
});
This code will listen for ALF_SINGLE_DOCUMENT_ACTION_REQUEST and execute the _onPayloadReceive function. In this function we filter to the example-action and execute any custom code.
The payload variable will include document and action objects. Using Debug Logging you can see what their shape is.
This is roughly equivalent to the old YUI method:
YAHOO.Bubbling.fire("registerAction", {
actionName: "onExampleAction",
fn: function(file) {
console.log("Received action, handling accordingly");
....
}
});
In all the examples on Sencha Touch 2 I see code samples like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
Ext.create('MyApp.view.MyView');
}
});
However, the code generated by Sencha Cmd is like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
Ext.Viewport.add(Ext.create('MyApp.view.MyView')); // <--- NOTICE THIS LINE
}
});
Notice that the example code did not add the newly instantiated View to Viewport but the actual code did. Are both codes equivalent? In the example code, how will the View add itself to the Viewport or that is optional?
Ext.Viewport is basically a container with the layout set as 'card'.
In your first sample, the class should have the config option 'fullscreen' set to true.
Setting fullscreen:true will automatically add the comoponent to the viewport when an instance is created.
Ext.define('MyApp.view.test', {
extend: 'Ext.Container',
config: {
fullscreen:true,
html: ['screen2'].join("")
}
});
Ext.create('MyApp.view.test');
From the doc for fullscreen
Force the component to take up 100% width and height available, by
adding it to Ext.Viewport.
In the second sample, a component is added to the viewport. (Don't need the fullscreen option). Like adding a panel into a container.
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
html: ['test'].join("")
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
From the doc for viewport
Because Ext.Viewport extends from Ext.Container, it has as layout
(which defaults to Ext.layout.Card). This means you can add items to
it at any time, from anywhere in your code. The Ext.Viewport
fullscreen configuration is true by default, so it will take up your
whole screen.
See attachment, I want the "Forgot password" to be a link instead of a button, but I cant find any Link UI element in Sencha which listen for the click event, doesnt it exist?
You can simply use a component and define the html for it, please see the code below:
{
xtype: 'component',
html: '<a href='+'"http://abc.com"'+ '>Forgot your password?</a>',
}
You can use Sencha routes, e.g.:
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
config: {
routes: {
'forgot-password': 'forgotPassword'
}
},
forgotPassword: function() {
// Your code here
}
});
Then you can formulate the link using the route name after a hashtag e.g.:
http://myapp.com#forgot-password
More on routes here: http://docs.sencha.com/touch/2-0/#!/guide/history_support
So working though the mostly absent docs on templates - unable to get it to work.
Ext.define('MyAPp.view.Login', {
extend: 'Ext.Component',
xtype: 'welcomeLogin',
config: {
html: 'This shows',
tpl: Ext.create ('Ext.XTemplate', '<div>Please show something</div>', {
compiled: true
})
}
});
Why does the template content now show? I have tried adding apply(), applyTemplate() on and on and on... Please help!!!
#ilija139 is right.
you need to define the data property, even if it's empty.
data: {}
Edit:
Also, the compile attribute isn't needed. It only applies to Ext.Templates not XTemplates (according to the docs). Works the same for me without compile