Blog Elements

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

Getting Started, Knowledge Base, PowerForms HTML

Basic Layout Customizations

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} […]

August 10, 2017/0 Comments/by Konstantinos

Getting Started, Knowledge Base, PowerForms HTML

First Look

When the installer finishes you should notice the newly added options on SharePoint’s toolbars, under List Settings. There is a new group called BPC PowerWebForms containing three buttons: NewForm, EditForm and ViewForm Options. In the most simple scenario, each button will present one option, to register/unregister the PowerForms components for new items,editing or view […]

August 10, 2017/0 Comments/by Konstantinos

Getting Started, Knowledge Base, PowerForms HTML

Basic Layout Customizations

August 10, 2017/0 Comments/by Konstantinos

Getting Started, Knowledge Base, PowerForms HTML

First Look

August 10, 2017/0 Comments/by Konstantinos

Full Sized Blog Element (Big Preview Pic)

Getting Started, Knowledge Base, PowerForms HTML

Basic Layout Customizations

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; color:#3333FF; float:left;}

.pf-picker-item:hover {color:#000; border-color:#999; background-color:#fff;}

</style>

function Foo(a) {return a;}

</script>

August 10, 2017/0 Comments/by Konstantinos

Getting Started, Knowledge Base, PowerForms HTML

First Look

In the most simple scenario, each button will present one option, to register/unregister the PowerForms components for new items,editing or view items respectively.

Let’s take a look at the UI of PowerForms.

Comparing it with SharePoint’s own (displayed below) there are very few changes, so one can start using PowerForms out of the box, without a steep learning curve.

PowerForms has its own Close and Maximize/Restore buttons. Maximizing to fill the entire working space will often be useful, especially if your list gets crammed with components. If you want you to change the default form size, you can do so by editing the web part and specifying a fixed width or height.

In the upper part of the form, there’s a toolbar displayed which consists of the following buttons.
•  New Record: If pressed while editing an existing item, it will clear the form and allow you to create a new record. It’s the same as selecting Add New Item while viewing the list. Note, that this will allow you to use the exiting form for adding items, even though you might have not registered PowerForms for New Items. Also, note that any changes to the existing item will not be saved.
Tip: You can use this button to add multiple items, by using Save and New Record, rather than closing the form and re-opening it.
•  Save Record: Saves the currently displayed item without closing the form.
•  Save and Exit: Saves the currently displayed item and returns to the list.
•  Delete Record: Deletes the currently displayed item. If you were in the process of adding a new record but haven’t saved it yet, then trying to delete it will provide you with an error message: Record not saved yet.
•  Cancel: Closes the form without committing any of the changes you might have done.
Note that changes regarding the form’s settings (see Design Form, Customizations or Run-Time Designer) have already been committed and are not affected by choosing Cancel. The same effect can be achieved by pressing the X on the top-right corner.
•  Flat Mode: Changes the form’s layout to include every different tab and control on a single form, making it easier to print.
•  Print: Prints the form.
•  Design Form: Pops up a form to view or change all the settings regarding the specific form.

For all of the above buttons, the user must have the relevant permissions. But even then you can choose to hide them using the Designer. For example, you can hide the New Record button if you don’t want to allow users to add records using this form.

Pressing the Design Form button creates a new pop-up window where you can make changes to how the form looks and functions.

Once again, there is a toolbar in the upper part of the form which consists of the following buttons

•  Save: Saves the changes made in the Designer view.
•  New Tab: Creates a new container tab on the form.
•  New Section: Creates a new section on a tab. You can use sections to group controls in order to create a cleaner look for your form as well as to group information together.
•  Hide Controls: This square looking button becomes active after you select a control on the form. Its purpose is to quickly make that control invisible on the PowerForms UI after you save the changes on the editor.
•  Delete: Deletes the selected control
•  Align Left: Changes the alignment of the selected control
•  Align Right: Changes the alignment of the selected control
•  Format Painter: Copies a single control layout to multiple controls.
•  Form Versions: Opens a new pop-up form that lists the different customizations for this specific UI form.
•  Migrate Customization: Opens the migration tool. You can use it to copy the customization to an identical list in another web site.
•  Export Xml Customization: Exports the form’s customization to an Xml file.
•  Import Xml Customization: Imports a PowerForms Xml customization file.
•  About: Opens the About PowerForms pop-up screen.

Click here to view a brief demonstration describing the basic concepts and usage of the Designer view.

August 10, 2017/0 Comments/by Konstantinos