How to style form element in the angular-schema-form schema and not the form? - css

I am building a form using the awesome angular-schema-form. I am able to create my form schema object quite successfully. I am wanting (hoping) to be able to set all the form components in the schema using the x-schema-form property in the schema object.
I am able to specify the type and the titleMap's for selects all perfectly. However where I am having an issue is assigning a style to the element using the "x-schema-form" - it just seems to be being ignored.
So when I do the following (Note I have the Ionic Framework)
"x-schema-form": {
"type": "textarea",
"style": "item item-input"
}
The "style" is not getting passed to the form. If I pass the style in the $scope.form [] then I get the style. I am however trying to do this all in the schema as it would be much easier for me to do it in one place due to the nature in which I get the list of form elements.
Any advice on this would be greatly appreciated.
Thanks
BrentR

so asf doesn't actually support the style attribute at all, so what you're trying there is not possible at the moment. However you can use x-schema-form to apply a fieldHtmlClass and then via CSS apply styling.
You can read more on the standard options in the documentation. https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#standard-options

Related

How to set type for special css-property's like variable . Typescript

I suppose there are already existing answers and I will thank you even if you just paste the link for the existing thread. But anyway.
There are in React when I specify style prop I have pretty good autocompletion and validation.
For example
What do I want?
I want to implement the same logic for my variable.
For example, in the code below
const position: ProperType = 'staticcc';
I want to replace ProperType with a really suitable type. After which
VScode will underline position and told me that there are errors (because 'staticcc' is an invalid value for CSS position property)
VScode will propose autocompletion like in the screenshot above.
I suppose there should be a special library or smth like this with predefined types. I even have googled csstype, it works fine for objects which I suppose to pass as style props. But I need not object, I need a special type for special CSS property to assign to the special variable. And don't know-how.
install csstype and
import * as CSS from 'csstype';
const position: CSS.Property.Position = 'static'

Django Rest Framework render_form & required fields

When using HTML form renderer in DRF, can anyone think of a nice way to auto generate some indication of "required" field in DRF, by hook or crook? I mean before I submit the form, some indication on the field that it is required - the Browsable API it will show right in the form what the error is but only after submitting.
Whether I am using technique as shown here for browseable API with field level HTML forms (instead of just raw/JSON form):
django-rest-framework - autogenerate form in browsable API?
Or I am using TemplateHTMLRenderer with a call to render_form as discussed in docs here:
http://www.django-rest-framework.org/topics/html-and-forms/#rendering-forms
I don't see a simple way to make my required fields rendered as required. So say we have like
#models.py
class Foobar(model.Models):
foo = models.CharField(max_length=100, blank=True, default='')
bar = models.CharField(max_length=100, blank=False)
The best I can think of is making my own template/snippet for each type of field "required-text-field.html", "required-checkbox.html", etc and using the style declaration in the serializer as shown here:
http://www.django-rest-framework.org/topics/html-and-forms/#field-styles
That's assuming I am understanding this, have not played with it yet to see.
But I would love to see a way to auto-generate the field with/without a required flag as appropriate (even just an asterisk, or applying a CSS class) based on the model definition.
Rambling: The goal here was to avoid writing my own forms, having DRF generate the form for me in custom views. As opposed to writing my own forms using tying them into AJAX I figured templates, render_form, and some format checks would suffice. But now I'm thinking DRF is built for back-end and dev, not front-end, and maybe I should plan to write my own forms if it will be end-user visible? Also I could have CSS files and select based on name, calling render_form then applying hand spun styles, would be less work than the HTML + the CSS. Should I review Django (just Django, not DRF) Forms and re-use serializer as validation?...
I can see 2 ways:
you can define your own template pack, look at the existing ones in the sources (e.g. 'rest_framework/horizontal/input.html') - you can check if field is required and according to this flag, set some css. you do not need something extra, especially "input-readonly.html" - just make your own copy of input.html, add few if-s and it will work.
or you can call OPTIONS on the API endpoint to get all the necessary information about fields, not only required, but readonly and allowed values for some selects - this is if you can update your forms from javascript

Load resources in gadgets in Jira

I've made an Add-on which is a custom field.
The style of the text in the field changes depending on the properties of an issue.
I check which style should the text have in the .java file and I pass the html class in a variable called $indicator to the velocity template:
#if( ${value} )
<span class="$indicator">${value}</span>
#end
It works perfect everywhere but in gadgets. When I add this field to a table showing issues in a dashboard, the html code is correct, but it doesn't find the css resource. This is because gadgets are inside an iframe.
How can I make the iframe have a reference to the stylesheet?
You did not say exactly which gadget you were using, but try adding the following context within your <web-resource> module:
<context>jira.webresources:issue-table</context>
The above should work for at least Assigned to Me, Filter Results, In Progress, Voted, and Watched in JIRA 6.1+.
If that does not work, you might also try:
<context>com.atlassian.jira.gadgets:common-lite</context>
If that general context doesn't work, you can look for which exact contexts are #requireContext'ed by the specific gadget you are trying to use, and then make sure that your web-resource is listed in that context. You can figure this out by looking at the gadget's XML and then searching for the #requireContext. (You can find the gadget XMLs inside $JIRA_DATA/plugins/.osgi-plugins/transformed-plugins/jira-gadgets-plugin-*.jar)
Starting with JIRA 7 the Answer of Scott Dudley is no longer working. #requireContext was replaced with a #requireResource within the Atlassian sources of this gadget.
As it affects our plugin, I created a Improvement Request to make that possible again

What are the best practices in order to add custom semantic markup to XForms?

Greetings to all Orbeon's folks,
I would like to add custom xml semantic markup to a XForms using Orbeon.
For instance, adding the tag or the property "person".
So do I have to create new tags or properties or both? What is the best practice? Considering differences between marking-up structures and marking-up elements?
Where can I put semantic markup without disturbing the behaviour of the Orbeon engine and still being able to access to it? I think it should be in the model declaration? Am I wrong?
Thanks
Use the label or hint elements to add metadata which is hidden or context-sensitive. Use placeholders to show that data as an annotation:
<xforms:label appearance="minimal">Your name</xforms:label>

What does "property=''" do?

I'm working on a Drupal site/theme. The CSS and PHP modifications are fairly easy; they just take a little time to learn and get working exactly how I want.
However, I'm having issues applying CSS styles to some elements because of what I think is a property function.
The code looks like <h2 property="dc:title" datatype="" class="node-title">.
What is a property function and what does it do or control within the page? Also how can I modify or remove it?
It's not a property function; it's an attribute that is used from RDFa, and that is added from the RDF module.
The easier way to remove those attributes is to disable the module, but I would not suggest doing it, as the purpose of that module is to enrich your content with metadata to let other applications better understand its relationships and attributes.
Alternatively, if the problem is just with that property, used for the nodes, then you can implement code similar to the following one:
function mymodule_preprocess_node(&$variables) {
if (isset($variables['title_attributes_array'])) {
$variables['title_attributes_array']['property'] = NULL;
}
}
The module should be executed after the RDF module, to allow its hook to be executed after the one implemented by the RDF module.
I have not seen any compatibility problem between the attributes added by the RDF module and the JavaScript code executed by Drupal core or third-party modules. It would probably be the case to investigate why you are having problems with the JavaScript code when those HTML attributes are added.
in your css file, put:
h2[property="dc:title"]{color:#FFFFFF;}
or if it is a link, you may need:
h2[property="dc:title"] a {color:#FFFFFF;}
From wikipedia, check out RDFa
RDFa (or Resource Description
Framework – in – attributes) is a W3C
Recommendation that adds a set of
attribute-level extensions to XHTML
for embedding rich metadata within Web
documents.
It is basically a way to add more metadata to XHTML docs for better semantics.

Resources