General info

Developing on Rapido with Blocks and Components in the most efficient way, requires you to have some background knowledge. This section will briefly explain some of the useful concepts, that will ease your experience with Block and Component development. If you feel like you still lack some ability and know-how, this section will provide you with the tools needed to become a successful Rapido developer.

If you want to use a component outside of a block you can call the Razor helper methods directly – this can be useful if you want to avoid adding complexity to the Blocks tree:

C%23
@Render(new Button { Link=“#”, Title=”My button”})

All components are designed the same way; helper methods all have the Render prefix, all have only one property set on the method, and that property is always an object with the same name as the component.

While there are many simple components available – e.g. Checkbox, TextField, and Number – the Field component allows you to quickly switch between field types using the FieldType property:

C%23
Block fieldTypeTest = new Block { Id = "fieldTypeTest", SortId = 43, Component = new Field { FieldType = FieldType.Textarea, Label = "MyLabel", Value = "MyValue" } };

While the Field component is a little more restricted than the specialized components, it is a great alternative when switching between field types in an easy manner, is a priority.

All fields that contain a list of options – Radio buttons, Checkbox list and Select fields – are designed the same way and use the same FieldListOption object, which means that it is easy to switch between list types.

List options can be defined both outside and inside a block, as in the following examples:

C%23
// With component and options defined inside block Block checkBoxListExample1 = new Block { Id = "CheckBoxListExample1", SortId = 44, Component = new CheckboxListField { Label="Label for CheckBoxListExample1", Options = new List<FieldListOption> { new FieldListOption { Label="A", Value="A"}, new FieldListOption { Label="B", Value="B"}, new FieldListOption { Label="C", Value="C"} } } }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, checkBoxListExample1); // With component and options defined outside block CheckboxListField myGreatChkList = new CheckboxListField { Id = "myGreatChkListId", Name = "myGreatChkListName", Label = "Label for checkBoxListExample2" }; myGreatChkList.Options.Add(new FieldListOption { Label = "A", Value = "A" }); myGreatChkList.Options.Add(new FieldListOption { Label = "B", Value = "B" }); myGreatChkList.Options.Add(new FieldListOption { Label = "C", Value = "C" }); Block checkBoxListExample2 = new Block { Id = "CheckBoxListExample2", SortId = 44, Component = myGreatChkList }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, checkBoxListExample2);

In addition to using the components delivered by us you can also create your own custom components. Before embarking on this, though, ask yourself whether you’re trying to solve a local problem or a global problem? If the answer is local – which means you will only need this component in one or two places – we advise you to instead use the standard Template property & a helper method way of rendering a block.

Let’s say you’ve been asked to create a Magical3DImageViewer component – this is a two-step process, since all components consist of a definition and a helper:

  • Open Templates/Designs/Rapido/Components/Custom/Custom__Components.cshtml
  • Write a simple definition like this:
C%23
@using Dynamicweb.Rapido.Blocks.Components @functions { public class Magical3DImageViewer : ComponentBase { public string Link { get; set; } } } @helper RenderMagical3DImageViewer (Magical3DImageViewer settings) { }

Here are some basic rules to follow when writing a custom component (or overriding an existing component): 

  1. Only one method parameter should be allowed
  2. Create the components consistently – always name the method property settings, etc.)
  3. If you create a property for a Component that is a type, like “Align”, it should not be of the type string but of type Enum. This makes it much easier to use the component.
  4. Consider what should be done to secure that it is easy to shift between similar components. 
  5. Never render empty attributes – see TextField.cshtml “optionalAttributes” to get an example of how this can be avoided. 
  6. Ensure that your component can be used without setting optional properties
  7. Make proper null-checks – it’s better to do this once too often than to never do it
  8. Keep things that relate to the particular component inside the helper. Do not make weird dependencies.
  9. Re-use General components inside other components, whenever it makes sense – like the Image component for all images and the Button component for all buttons.

Please note that the component MUST have a unique name – we recommend a name which will not collide with future standard components, e.g. YOURCOMPANYNAME_Magical3DImageViewer