I need to change the title of a grid header, and add a custom component to it. I use a .properties file to set the title, and this template code to add the custom component:
<table class="table table-striped" t:type="grid" t:source="data" t:rowsPerPage="50" t:pagerPosition="bottom">
<p:specialHeader>
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
</table>
When viewing the grid in a browser, the component appears but there is no title.
If I set a title in the template, like so, then it loses the sort functionality:
<p:specialHeader>Title
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
How can I get the title, sort and custom component to appear?
As I said here you can't combine the default header block and your own custom header block, it's either one or the other.
I think you're best bet is a mixin. Take a look at Taha's blog post here where he creates a HelpText mixin which applies to a Label component. His mixin looks at the message catalog for a "propertyName-help" entry and adds a "title" attribute to the DOM. The blog post takes it one step further and uses a ComponentClassTransformWorker2 to atach the HelpText mixin to every label (even the ones inside the BeanEditor component).
You could do the same thing but you would create a mixin for either Grid or GridColumns (Grid delegates to GridColumns to draw the headers). If you'd like some examples of Grid mixins, take a look at my tapestry-stitch demo's here and here.
So, you won't be reusing the tooltip component, you will be copying the behaviour. This will most likely involve adding a "data-tooltip" attribute to the th DOM elements serverside. You can then fire some javascript on the client to find all elements with a "data-tooltip" attribute and do some UI magic.
Related
We have a component that has a child component, within that, there is another child (child-2) component added. When in author ui, child-2 component does have style icon (in component action toolbar); however clicking on that renders a blank list.
If that child-2 component is added as independent component style icon as well as list (when clicked on) is also visible (with all styles variation as defined in policy).
We tried various ways to debug it but can not. Can anyone please help us here
AEM style system works by defining the styles in the policies. These policies should use the exact path where the component can potentially be placed.
Example: If the component's path is
/apps/project/components/content/myheader then the policy will be defined at path similar to below
/conf/project/settings/wcm/policies/project/components/content/myheader/policy_xxx.
But this policy definition will be used in a path in a template where you would use your component. For example if your template name is templateA and the name of the responsivegrid where your component myheader will be placed is headerGrid then myheader's policy will be used here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/headerGrid/project/components/content/myheader <cq:policy property>.
The styles defined in policy will then only be visible in the above responsive grid (parsys in old language). To allow this styles in any other path, in your temlate create the path as required and use the policy there.
Following the above example, if you want your stlyes to be available in a componentA in the TemplateA where componentA is placed in bodyGrid then use the policy here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/bodyGrid/componentA/project/components/content/myheader <cq:policy property>.
This should resolve your problem as tested in my system. Unfortunately there is no sandbox public to show you an example.
I'm working on a project for school where one is able to create HTML elements by using Selection.js (visual selection turns into an HTML element). Currently, the user is able to write CSS in a CodeMirror editor. After the user applies the CSS by clicking a button, the styling is directly inserted onto the created React component trough props.
My main goal is to allow the user to create multiple elements with multiple styling rules, to then (in the end) export the created elements along with their styling.
I've imported JSS, because of the createStyleSheet function that generates styling based up on a JavaScript CSS object (which comes from the CodeMirror input) and because of the fact that the directly injected style trough props is not reusable (because it doesn't contain classes, just properties). The problem with JSS is that it generates styling in the form of .mySpecialClass-0-1 {...}
This is the code that I'm using when the user applies the style (on click).
onStyleInput(e) {
e.preventDefault();
try {
let style= cssToObject(this.codeMirror.getValue(), {camelCase: true});
this.styleSheet = jss.createStyleSheet(style, {link: true}).attach();
console.log(this.styleSheet);
}
catch (exception) {
// console.log("Something went wrong, check your css syntax");
console.log(exception);
}
}
The result I expected from JSS was styling in the form of .mySpecialClass {...}, without the unique id's.
I've been looking trough the JSS API, but there doesn't seem to be an available boolean to toggle the unique id generation.
Is there a better way of achieving my goal?
Thanks in advance!
The easiest way to have JSS classes without ID is, make it as "Global" styles. It is mean, we have global CSS styles which not attached individually to the elements. Rather than just put/set HTML className without really utilizing JSS result. They call it "Global selectors" at "plugin" section at their documentation pages.
You can find documentation here: https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7
In gwt how to get a widget's default style(CSS Selector).For example, gwt button has style name "gwt-button" which is referenced in gwt theme css file.
How to got that programmatically.
Is there any,
DOM.getStyleAttribute();
to accomplish this. GWT experts please help.
In your example of button (or any object that is a child of UIObject) can call getStyleName()
UIObject documentation
String com.google.gwt.user.client.ui.UIObject.getStyleName()
Gets all of the object's style names, as a space-separated list. If you wish to retrieve only the primary style name, call getStylePrimaryName().
Now as to why you need this information is the real question. It is my guess that you want to change the styling of an object (add or remove). This would best be done by either of the following methods.
1) Supplying a custom resources file to the object that has your styling
2) creating a class that extends Composite and create a custom UIBinder class with all of your styles within it.
As you probably already know, I'm working hard on some XPM templates with Razor. I've ran into another issue, this time concerning rendering components inside templates in order to make them siteEditable.
The following I'm not sure about. I've got a component which has a title field called "Title", and multivalue componentlink fields which consists of components with a title, description and image. Let's call this one "Linked USP" for now.
Currently this is being rendered by a Template called 'Page Banner', and it just iterates over fields with some If-loops to determine it's presentation, especially for the Title. In order for XPM to work, this template needs to render the component presentation of "Linked USP". So we've created a template called "[XPM] USP ITEM". - this Component template has the 'enable content editing TBB" added to it.
Now the issue arises when I want to make the Title Editable as well. Sounds straightforward, no? Not really - because when the parent template has got a "enable for content editing" TBB added, it will add <span> tags to all editable fields but the templates that gets invoked inside this template will also have <span> -tags, effectively bloating the html and making it impossible to edit the fields inside the RenderComponentPresentation because of duplicate <span>s.
Some code for your fun and to illustrate my issue:
<h1>#RenderComponentField("Title", 0)</h1>
#Foreach(var linkedUSP in Fields.USPS){
#RenderComponentPresentation("linkedUSP.ID", "tcm:10-1076-32")
}
This template has an enable Content edit TBB added.
now, for the RCP mentioned above, inside its [XPM] template:
<div class="title">#RenderComponentField("Title", 0)</div>
<p>#RenderComponentField("Description", 0)</p>
<tcdl:ComponentField name="img">
<img src="#img" alt="img.MetaData.alt">
</tcdl:ComponentField>
This one ALSO has the "Enable Content Edit" TBB added. On the front end this happens:
<div class="title"><span><span>Men</span></span></div>
Because the parent template also adds spans to the field.
So my question: how do i solve this? The Title field mentioned above has to be inside the parent template, but I can't create a special template for it becuase it is no component link. I can't get the TBB out of my RCP template, because it won't be editable that way. Interesting huh?
Can't I disable the spans inside template builder somehow?
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.