Blog Elements

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

Designer, Knowledge Base, PowerForms HTML

Changing default styles

The content of the includes section are appended inside the final form html. You can add any additional scripts to be included in the form, or define your required styles. For example : Code <style> .pf-required-field {border-style: dotted; border-width: 2px; } .pf-button {background-color:blue; color:#ddd;} .pf-button:hover {color:#fff;background-color:#000000;cursor:pointer;} .pf-button:active {color:#fff;background-color:#f0713a;} .pf-button:disabled {color:#aaa;background-color:#f2f2f2;} .pf-toolbar-button {height:80px;width:75px;} .pf-section-header-text {font-size:14px; […]

July 21, 2017/by Konstantinos

Designer, Knowledge Base, PowerForms HTML

Conditional customizations

Sometimes in Sharepoint, there may be a need to have more than one form layout for an individual list. Different fields or form designs may be required to differentiate between field values. For example using a customers list, we may need to paint the form’s background blue if the gender is male and pink if […]

July 21, 2017/by Konstantinos

Designer, Knowledge Base, PowerForms HTML

Changing default styles

July 21, 2017/by Konstantinos

Designer, Knowledge Base, PowerForms HTML

Conditional customizations

July 21, 2017/by Konstantinos

Changing default styles

The content of the includes section are appended inside the final form html. You can add any additional scripts to be included in the form, or define your required styles. For example :

Code

function Foo(a) {return a;}

</script>

Conditional customizations

Sometimes in Sharepoint, there may be a need to have more than one form layout for an individual list. Different fields or form designs may be required to differentiate between field values.

For example using a customers list, we may need to paint the form’s background blue if the gender is male and pink if female.

PowerForms HTML supports different customizations for each list. By default, each form automatically creates a customization with no conditions applied and this customization is used every time the form appears.

In order to see the different form layouts, we select the following button on the editor screen:

A form containing the default customization appears:

Let’s describe how to create a second form layout for the same list. For our example, we’ll need to present a different form to the user everytime the item’s title is test. To do so, we follow these steps:

– Select the default condition

– Enter our conditional statement in the Create copy with condition box. In our case, we want to automatically load this form customization every time the title is test. The statement is:

“{Title}”=”test”

– Press on the Copy button.

*Note : You should use the field’s Sharepoint name when trying to create a conditional statement and not the name given by the designer. i.e. notice we are using Title instead of c_Title.

From this point on, this customization will automatically load everytime the title is test. To visually differentiate between the two customizations, we select our newly created condition and press on theSelect button. This causes the editor to load the selected customization.

Using the Editor, we decide to change the background color of the c_Title field to red. This means that everytime the Title is test, the box will have a reddish hue else it will be white.

Title is test

Different Title

You can edit the conditional statement by going to the design form and selecting Options.

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

Full Sized Blog Element (Big Preview Pic)