Skip to main content
Home  › ... Razor

Dynamic DataSources Tutorials

Tutorial HomeDynamic DataSources
The samples can differ based on your Razor base class or if you're running an old version.
Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Use Dynamic DataSources in Visual Query

The following query will simply combine the two DataSources. The first will provide the authors. The second will apply the KeepOdd filters.

⬇️ Result | Source ➡️

Data in the Query (2)

  • Terry (ID: 48833)
  • Ed (ID: 48843)
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq

<h3>Data in the Query (@MyData.List.Count())</h3>
<ul>
  @foreach (var item in AsItems(MyData)) {
    <li>
      <strong>@item.Title</strong> (ID: @item.Id)
    </li>
  }
</ul>

Source Code of Authors.cs

using System.Linq;
using ToSic.Eav.DataSources;

public class Authors : Custom.DataSource.DataSource16
{
  public Authors(MyServices services) : base(services)
  {
    ProvideOut(() => {
      // Get the app data
      var appData = Kit.Data.GetAppSource();

      // Get the Content-Type Filter DataSource
      var contentTypeFilter = Kit.Data.GetSource<EntityTypeFilter>(attach: appData, parameters: new { TypeName = "Persons"});

      // Return all the items after filtering
      return contentTypeFilter.List;
    });
  }
}

Source Code of KeepOdd.cs

using System.Linq;

public class KeepOdd : Custom.DataSource.DataSource16
{
  public KeepOdd(MyServices services) : base(services)
  {
    ProvideOut(() => {
      // Make sure we have an In stream - otherwise return an error
      var inStream = TryGetIn();
      if (inStream == null) return Error.TryGetInFailed();

      // Return only odd items
      return inStream.Where(e => e.EntityId % 2 == 1);
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: DynamicDataSourceKeepOdd
Details for Query: DynamicDataSourceKeepOdd

This query will simply get all the odd items using the Custom DataSource.

This Query will simply keep all Entities with Odd IDs

Use Custom DataSources in Visual Query

Custom DataSources appear under App in Visual Query.

This is where all Custom DataSources are located in VisualQuery.

DataSources which have [Configuration] attributes can also support full visual configuration. The system looks for a content type with the same name as the DataSource + Configuration. In this case, it's looking for a Content Type WithConfigConfiguration.

⬇️ Result | Source ➡️

Data in the Query (7)

  • Hello from WithConfig #1 - Favorite Color: burgundy
  • Hello from WithConfig #2 - Favorite Color: burgundy
  • Hello from WithConfig #3 - Favorite Color: burgundy
  • Hello from WithConfig #4 - Favorite Color: burgundy
  • Hello from WithConfig #5 - Favorite Color: burgundy
  • Hello from WithConfig #6 - Favorite Color: burgundy
  • Hello from WithConfig #7 - Favorite Color: burgundy
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq
@using ToSic.Eav.DataSources

<h3>Data in the Query (@MyData.List.Count())</h3>
<ul>
  @foreach (var item in AsItems(MyData)) {
    <li>
      <strong>@item.Get("Title")</strong> - Favorite Color: @item.Get("FavoriteColor")
    </li>
  }
</ul>
@* TODO:: @2dm Query Img  *@

Source Code of WithConfig.cs

using System.Linq;
using ToSic.Eav.DataSource; // This namespace is for the [Configuration] attribute

public class WithConfig : Custom.DataSource.DataSource16
{
  public WithConfig(MyServices services) : base(services, "My.Magic")
  {
    ProvideOut(() => {
      var result = Enumerable.Range(1, AmountOfItems).Select(i => new {
        Title = "Hello from WithConfig #" + i,
        FavoriteColor,
      });
      return result;
    });
  }

  // This attribute [Configuration] creates a configuration "FavoriteColor"
  // In this example [Configuration] already knows about the fallback.
  // * The property getter calls Configuration.GetThis()
  // * GetThis() will automatically use the property name "FavoriteColor" to look up the config
  // * Calling an empty GetThis() will always return a string,
  //   so it's ideal for string-properties where the Fallback was specified before
  [Configuration(Fallback = "magenta")]
  public string FavoriteColor { get { return Configuration.GetThis(); } }

  // This attribute [Configuration] creates configuration "AmountOfItems"
  // * The property getter calls Configuration.GetThis()
  // * GetThis() will automatically use the property name "AmountOfItems" to look up the config
  //   and will use the default value of 1 if it was not specified
  [Configuration]
  public int AmountOfItems { get { return Configuration.GetThis(1); } }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: DynamicDataSourceWithConfig
Details for DynamicDataSourceWithConfig
Configured QueryEdit Configuration

Use Custom DataSources in Visual Query

Custom DataSources appear under App in Visual Query.

This is where all Custom DataSources are located in VisualQuery.

Many aspects such as the Icon, Name etc. have automatic defaults. But you can configure them as you need using the [VisualQuery] attribute.

⬇️ Result | Source ➡️

Data in the Query (1)

The data coming out of this DataSource is not important for the demo here. What's important is how the DataSource is customized to have specific properties in the VisualQuery.

To Customizations the VisualQuery, you can either use the VisualQueryCustomized.cs file. Look at the file for more information about VisualQuery.

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq
@using ToSic.Eav.DataSources


<h3>Data in the Query (@Data.List.Count())</h3>
<p>
  The data coming out of this DataSource is not important for the demo here.
  What's important is how the DataSource is customized to have specific properties
  in the VisualQuery.
</p>
<p>
  To Customizations the VisualQuery, you can either use the VisualQueryCustomized.cs file. 
  Look at the file for more information about VisualQuery.
</p>

Source Code of VisualQueryCustomized.cs

// This is necessary to use the [VisualQuery] Attribute
using ToSic.Eav.DataSource.VisualQuery;

// Configure some common aspects in Visual Query
// There are more, but they usually don't make sense on a Dynamic DataSource
[VisualQuery(
  // Give it a nice name and UI-Hint in visual query
  NiceName = "Customized DataSource",
  UiHint = "This demonstrates how to customize the visual query integration",
  // Customize the icon - see google material icons for more
  Icon = "opacity",
  // Customize the link on the (?) icon
  HelpLink = "https://2sxc.org",
  // Customize which Content Type to use when configuring this
  ConfigurationType = "WithConfigConfiguration"
)]
public class VisualQueryCustomized : Custom.DataSource.DataSource16
{
  public VisualQueryCustomized(MyServices services) : base(services)
  {
    // Trivial example, as this demo should focus on the VisualQuery
    ProvideOut(() => new {
      Title = "Hello from VisualQueryCustomized",
      TheAnswer = 42,
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: CustomDataSourceCustomized
Details for the Customized DataSource

This data source has a bunch of properties such as icon, help-link etc. to assist when creating a query.

Use Custom DataSources in Visual Query

Custom DataSources appear under App in Visual Query.

This is where all Custom DataSources are located in VisualQuery.