I'm working on a sitecore project where i'm using WFFM (Web Forms For Marketers), I have a form and would like to change the styling of a date picker. By default it appears with -'s. I ant /'s.
One way would be:
$('.scfDatePickerTextBox').val().replace(/-/g,'/')
Theres no option to change the styles? that I know of? Any help guidance would be grateful.
When using WFFM as your forms builder i think it is not possible to style the dateformat.
When adding a date field, it always shows up as three droplists:
see this image: http://content.screencast.com/users/MoonCrawler/folders/Jing/media/627a9a76-de8d-4ad7-9097-81e21d38f54c/2013-01-30_1658.png
If you want to change styles (display) assign different css class. if your date is displayed with -'s in stead of /'s then i think you are using a custom form, you should be able configure the output of the date via the code behind file.
if this does not help, please provide sitecore version, WFFM version and type of form used.
Related
I am in the process of fitting Sitecore Web Forms for Marketers to a solution. For that to work I need 3 things:
The ability to inject JavaScript from a rul
Rewriting all generated code to use Foundation (instead of Bootstrap)
Be able to read the submittet data of a "changed" form. Ie. a form where there is injected extra field through JavaScript.
My initial questions for this is to the second point: How do I write these views?
I have followed this article: http://www.hhogdev.com/blog/2015/september/customizing%20wffm%20in%20sitecore%208.aspx but unfortunately He does not elaborate on how to generate proper names/ids for fields and the form.
Can anybody point me in the right direction for that?
The blog post you linked to was written based on Sitecore 8.0, and although the module is the same the implementation of WFFM has since changed (unfortunately for the worse IMO).
We are currently using WFFM with Foundation, so it is possible to have them both working together but there are a few things you have to do.
I config disable Bootstrap CSS, this will mean Bootstrap markup but without the CSS files being included. I suggest you style around the given settings as much as possible to save future upgrade issues:
<settings>
<setting name="WFM.EnableBootstrapCssRendering">
<patch:attribute name="value">false</patch:attribute>
</setting>
</settings>
If you need to edit the markup then the default views for the form field markup files can be found under: Website\Views\Form and the EditorTemplates folder under that. Here's the kicker. In versions earlier than 8.0 update-5 the markup did not use the Bootstrap helper and therefore the markup was all present. The latest implementation hides this all away and therefore harder to edit in my opinion.
If you struggle with the Bootstrap markup then take a look at the view files from WFFM 8.0 update-5 or earlier. The markup is much more obvious and you should be able to (essentially) port these over to Sitecore 8.1 and then amend the markup as required (although we have found added the correct surrounding foundation DIV's were enough)
I have no idea what you mean by point 1, but for point 3, you can't. WFFM only works on the fields that you create on the back end, any new fields you create with JS will get lost. If you need to do something clever then use a hidden field (this requires adding a custom field type unfortunately) and then populate this hidden field with the data that you need passed back to the server.
I am working on a requirement in Sitecore 8 according to which there is a Rich text field and the content author can not only add html data but can also add predefined call outs/renderings/images directly in page editor mode.
Is there any way I can achieve this ? Please help.
We achieve this using Components in Experience Editor. As you create pages, we created components for Image, Video, Text and any Callouts. You will be able to drop components on the page based on specified placeholder settings. In my opinion it is the cleanest approach.
It sounds like 'snippets' is the way to go for you. There are some posts on the web about how to add snippets to RTF fields:
http://davetayls.me/blog/2011/02/07/adding-rich-snippets-to-sitecore-rich-text-editors/
http://sitecoreblog.blogspot.ca/2010/11/richtext-editor-add-code-snippet-or.html
http://learnsitecore.cmsuniverse.net/en/Editors/Articles/2009/06/How%20to%20use%20snippets.aspx
So I am rather new to sitecore, and it's a topic that wasn't covered during my training. My questions is just to help point me to the correct term, or documentation on a method to do the following.
I have a definition item, with a ton of field groups, what I want to do is something like:
if Value of Field X is "yes" then collapse/hide Field X or Field Group X.
Does that make sense? Is it a validation rule? or some other kind of rules, is it a workflow I need to attach? Do you place it on just the field I want to hide, or the field that triggers the action?
I appreciate any guidance.
There is nothing out-of-the-box in Sitecore to achieve what you want but there is no reason you cannot create a composite custom field type to do this. The following articles will help you achieve this:
Creating a custom Sitecore Field
Getting to Know Sitecore: Custom Fields, Part 1
Create a new control, inheriting either from Droplist (if the comparison of the value is to be text based) or Droplink (for comparison of ID). You could add a parameter in the Source field of the control to specify what the values that trigger the hide should be.
The underlying control in the Content Editor is just a standard HTML select element. Add onchange events to the control and add your Javascript handler to hide the other controls. Since I could not find a way of adding additional custom css classes to the Sitecore controls, it would be best/easiest to hide all other controls in the same collapsible group after you control. This would mean you would need to group your controls better (or logically at least).
The Javascript will be something like this (the Content Editor uses the Prototype JS framework):
if ($(this).getValue() == 'no') {
// find the parent container of this control and then hide all the next siblings in the same group
$(this).up('.scEditorFieldMarker').nextSiblings('.scEditorFieldMarker').invoke('hide');
}
You can test this by running the above in the console, change out the keyword this with the id of your field, e.g. $('FIELD2292054').
What I am not sure about is how to trigger the hide on initial load, i.e. when someone returns to an existing item, it may be possible by adding to one of the pipelines, but would be better using a JS solution if possible. I'll have a think about this and get a proper code sample up over the next few days.
EDIT: You can add an event handler to sc:contenteditorupdated to handle the content editor being rel-oaded.
document.observe("sc:contenteditorupdated", myFunction);
I wrote up a blog post and put the code on GitHub if you are interested.
Not sure if you have come across Andy Uzick's this blog post.
He wisely talks about hiding fields in the Content Editor and has also created a Sitecore Module called Hide Field Template Extension which is hosted on the Sitecore Marketplace with the full source code to extend.
After reading through and trying the extension, I do feel that it will not completely resolve your issue (how you have described it in the question).
But it will give you:
A mid-term solution to hide a few unnecessary field that some content editors would not like to view.
Fields that are only required by administrators for admin purpose - to de-clutter these fields could be hidden.
Just one thing to bear in mind that it mentions in the requirements Sitecore 6.5 & 6.6. I have not tested it in Sitecore 7. If you are using Sitecore 7, which I think you are, one could modify the source code and make it work for Sitecore 7.
Have a look and share your findings.
Happy Sitecoring!
I was trying to move components in Page Editor mode , and below are the things I have done to achieve this :
Set Compatible rendering selected for the Sublayouts
Added placeholder settings and allowed controls for placeholders
But , when I was trying to move components, the DataSourceItems for the sublayouts are not changing , hence the content is not changing.
And , also sometime I am getting Field related errors if the fields are different in the DataSources.
Can someone please help me in this .
From your question, it sounds like you are trying to move a component from one placeholder to another in Page Editor. That does not affect the data source.
If instead you mean you are trying to personalize the experience by using rules to switch the data source within a sublayout, the steps you've taken won't allow for that. You need to add conditions to the sublayout in Page Editor to choose which data source you want to display.
If you are trying to have compatible renderings (different sublayouts) show for the same placeholder, that is something that is done by your step 1. This is only to help authors know what other sublayouts would be a good idea to put in that placeholder. It does not affect the data source.
When you add components, the datasource for them is not set automatically. You need to check if it's set and use Sitecore.Context.Item if it's not.
Not sure if that's what you mean..
As for field related errors, please post more details.
I'm currently using the WFM module in Sitecore to display a form full of fields in sections.
I'm trying to do the following:
Use "Layout Rules" to show/hide a section of fields, depending on checkbox value
When I try to use the Layout Rules on the section I want to hide/show, it doesn't seem to be working (everything is showing).
I've put in the following logic:
NEW CONDITION
where HotelAmenitiesCheckbox field IS NOT EQUAL TO 1
hide element
'HotelAmenitiesCheckbox' is a checkbox field in the form. I've set the name and DisplayName in Sitecore to be exactly what I've typed above.
Can anyone help explain which direction I need to go? This is frustrating with my limited knowledge of .NET and Sitecore's limited documentation.
Thanks in advance!
I have the same issue and haven't been able to find an out-of-box solution with the WFFM module so I came up with this workaround that leverages the Help field of a WFFM field to store a "line of code". I gave the marketers an if statement that they can write in the Help field and when the form loads on the front-end, there's some JS that parses that if statement and hides/shows fields that are dependent on each other. I asked this question just this weekend, and got a lot of help from the community here on Stackoverflow: Conditional Renderings with JavaScript Regex.