How to add a css class to a z3c.form button - plone

I want to add the css class allowMultiSubmit to a zrc.form button to avoid multi-submit alert. The button is defined like this:
from z3c.form import form
from plone.app.z3cform.layout import wrap_form
class MyForm(form.Form):
...
#button.buttonAndHandler(_(u"Search"))
def handleSearch(self, action):
...
MyWrappedFormView = wrap_form(MyForm)
The result that I want to achieve is this:
<input id="form-buttons-search"
class="submit-widget button-field allowMultiSubmit"
type="submit"
value="Search"
name="form.buttons.search">
There must be an easy way but I can't figure out how.


You can override the updateActions method of your z3c.form class and use the addClass method to add a css class to your button:
from z3c.form import form
from plone.app.z3cform.layout import wrap_form
class MyForm(form.Form):
...
#button.buttonAndHandler(_(u"Search"))
def handleSearch(self, action):
...
def updateActions(self):
super(MyForm, self).updateActions()
self.actions['submit'].addClass("allowMultiSubmit")
MyWrappedFormView = wrap_form(MyForm)

Related

is there a way to add class from module css with variable? in react

see example below:
import React, { Component } from 'react';
import styles from './Button.module.css';
class Button extends Component {
let classNameVariable= "error-button"
render() {
return <button className={styles.classNameVariable}>Button</button>;
}
}
as you saw above example, I need to use variable instead of className, to add className.
so is there a way to do it?

Take a look at bracket notation: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors
Instead of styles.clasNameVariable make it styles[classNameVariable]

Add / Remove class of button when Clicked by user

I am using Angular 12 and I have a button:
<button class="action">Sign In</button>
I need to add a CSS Class when it is being clicked by the user so I can change its style.
The moment it stops being clicked the style should be removed.
I tried with CSS but wasn't able. I think it is not possible.
Is it possible to do this with an Angular directive?

Import ElementRef from the angular core and define in constructor then try the below code:
The below line of code will give you the first occurrence of the button tag from the Component. querySelector gives you the first item and querySelectorAll gives you all items from DOM.
import { Component, ElementRef } from "#angular/core";
constructor(private el: ElementRef) {
}
let myTag = this.el.nativeElement.querySelector("button");
Add Class:
if(!myTag.classList.contains('myClass'))
{
myTag.classList.add('myClass');
}
Remove Class:
myTag.classList.remove('myClass');

Using existing css class in Stripe Elements for React

I'm trying to use our existing CSS classes in my Stripe Elements form. According to this document https://stripe.com/docs/stripe-js/reference under section Elements options, I can pass my existing CSS classes but my code below didn't work.
const customStripeClasses = {
base: 'app-form-default input',
};
class MyPaymentForm extends Component {
render() {
return(
<div>
<CardElement classes={customStripeClasses} />
</div>
);
}
}
Basically, I'm trying to get Stripe Elements form components to use the CSS classes we created for regular HTML elements e.g. input, textarea, etc.
Any idea how I can get this to work?

As far as I can see from the docs you need to use react-stripe-elements to use stripe with react. And CardElement has no prop classes. You can pass css classes to it with className:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<div>
<CardElement className="app-form-default input" />
</div>
);
}
};

New method in plone.app.textfield.widget.py

I have to extend the
class RichTextWidget(TextAreaWidget):
from the package plone.app.textfield.widget.py
I need an additional method:
def new_method(self):
do_anything...
How can I achieve this?
I added some code in my existing overrides.zcml, but this has no effect:
<z3c:widgetTemplate
layer="z3c.form.interfaces.IFormLayer"
mode="display"
template="widget_display.pt"
widget=".widget.RichTextWidget"
/>
In my custom widget.py I tried this:
from plone.app.textfield.widget import RichTextWidget as DefaultView
class RichTextWidget(DefaultView):
def new_method(self):
return 'foo'

MultiCheckBoxWidget rendered as In-Out-Widget

We have the following Dexterity schema:
from plone.app.form.widgets import MultiCheckBoxWidget
visibilityVocabulary = SimpleVocabulary(
[
SimpleTerm(u'OSP', title=u'OSP'),
SimpleTerm(u'BIZ', title=u'BIZ'),
]
class ISomeSchema(Interface):
# ...
form.widget(visibility=MultiCheckBoxWidget)
visibility = schema.Set(title=Visibility',
value_type=schema.Choice(vocabulary=visibilityVocabulary)
)
The field is rendered using an In-And-Out Widget instead of using checkboxes
as specified inside our schema.
Why?

Widgets in plone.app.form are for zope.formlib forms. Dexterity uses the z3c.form form library.
Try z3c.form.browser.checkbox.CheckBoxFieldWidget instead. Like this:
from zope import schema
from zope.schema.vocabulary import SimpleVocabulary
from zope.schema.vocabulary import SimpleTerm
from plone.directives import form
from z3c.form.browser.checkbox import CheckBoxFieldWidget
visibilityVocabulary = SimpleVocabulary(
[
SimpleTerm(u'OSP', title=u'OSP'),
SimpleTerm(u'BIZ', title=u'BIZ'),
])
class ISomeSchema(form.Schema):
form.widget(visibility=CheckBoxFieldWidget)
visibility = schema.Set(
title=u'Visibility',
value_type=schema.Choice(vocabulary=visibilityVocabulary)
)

Resources