Core Components

{
  "component": "smarty.SmartResourceList",
  "props": {
    "key": "smarty.SmartResourceList",
    "hasFilter": true,
    "module_name": "blog",
    "resource_name": "blog",
    "actionName": "viewAll",
    "extraItemProps": {
      "alignment": "right"
    },
    "skeletonComponent": {
      "component": "skeleton.blog.blog"
    },
    "emptyComponent": {
      "component": "ui.EmptyList",
      "props": {
        "label": "no_blogs_found",
        "action": {
          "label": "add_new_item",
          "sub_label": "start_adding_new_items_by_create_new_stuffs",
          "value": "addItem",
          "params": {
            "module_name": "blog",
            "resource_name": "blog"
          },
          "showWhen": ["and", ["truthy", "acl.blog.blog.create"]]
        }
      }
    }
  }
}

{
  "component": "smarty.SmartTabs",
  "props": {
    "key": "smarty.SmartTabs",
    "tabsRefreshEnabled": true,
    "headerComponent": {
      "component": "ui.UserHeaderInfoBlock",
      "props": {
        "key": "ui.UserHeaderInfoBlock",
        "module_name": "user",
        "resource_name": "user",
        "actionName": "viewItem"
      }
    },
    "tabs": [
      {
        "component": "smarty.SmartResourceList",
        "props": {
          "title": "blog",
          "module_name": "blog",
          "resource_name": "blog",
          "actionName": "viewAll",
          "skeletonComponent": {
            "component": "skeleton.blog.blog"
          },
          "emptyComponent": {
            "component": "ui.EmptyList",
            "props": {
              "label": "no_blogs_found"
            }
          }
        }
      }
    ],
    "showOneTab": false,
    "tabBarStyle": {
      "width": "auto"
    }
  }
}

{
  "component": "smarty.SmartListBlock",
  "props": {
    "key": "smarty.SmartListBlock",
    "horizontal": true,
    "title": "similar_blogs",
    "itemView": "item.blog.blog.Similar",
    "moduleName": "blog",
    "resourceName": "blog",
    "actionName": "viewSimilar",
    "limit": 10,
    "customAction": {
      "key": "viewAll",
      "icon": "angle-right",
      "router": "viewItemListing",
      "headerTitleForActionScreen": "similar_blogs"
    }
  }
}

{
  "component": "smarty.SmartScrollIntab",
  "props": {
    "key": "smarty.SmartScrollIntab",
    "components": [
      {
        "component": "ui.ProfileInformationBlock",
        "props": {
          "key": "ui.ProfileInformationBlock",
          "title": "information"
        }
      }
    ]
  }
}

{
  "component": "ui.ModuleHeader",
  "props": {
    "key": "ui.ModuleHeader",
    "title": "all_blogs",
    "rightButtons": [
      {
        "component": "ui.HeaderRightButton",
        "props": {
          "key": "searchItem",
          "icon": "search-o",
          "value": "searchItem",
          "params": {
            "module_name": "blog",
            "resource_name": "blog"
          }
        }
      }
    ]
  }
}

{
  "component": "ui.HeaderItemDetail",
  "props": {
    "key": "ui.HeaderItemDetail",
    "title": "blog",
    "menuName": "detailActionMenu"
  }
}

{
  "component": "ui.SimpleHeader",
  "props": {
    "key": "ui.SimpleHeader",
    "title": "blog"
  }
}

const [ItemTitle] = jsxBackend.all(['ui.ItemTitle']);
 
<ItemTitle title={item.title} item={item} />;

const [ItemPricing] = jsxBackend.all(['ui.ItemPricing']);
 
<ItemPricing item={item} />;

const [ItemPendingStatus] = jsxBackend.all(['ui.ItemPendingStatus']);
 
<ItemPendingStatus item={item} />;

const [ItemHtmlContent] = jsxBackend.all(['ui.ItemHtmlContent']);
 
<ItemHtmlContent text={item.text} containerWidth={100} noBorder={true} />;

const [ItemExternalLink] = jsxBackend.all(['ui.ItemExternalLink']);
 
<ItemExternalLink item={item} />;

const [ItemAuthor] = jsxBackend.all(['ui.ItemAuthor']);
 
<ItemAuthor
  user={item.user}
  date={item.creation_date}
  owner={owner}
  numberOfLines={2}
  privacy={item?.privacy}
/>;

const [ItemCategories] = jsxBackend.all(['ui.ItemCategories']);
 
<ItemCategories
  categories={categories}
  separator={separator}
  showLabel={showLabel}
  numberOfLines={numberOfLines}
  textTransform={textTransform}
  styles={styles}
  label={label}
  isActive={isActive}
  onPress={onPress}
/>;

const [ItemTags] = jsxBackend.all(['ui.ItemTags']);
 
<ItemTags
  label={'topics_colon'}
  tags={item.tags}
  module_name={item.module_name}
  resource_name={item.resource_name}
  styles={styles}
/>;

const [ItemExtraInfo] = jsxBackend.all(['ui.ItemExtraInfo']);
 
<ItemExtraInfo
  label={`${i18n.formatMessage({ id: 'year' })}: `}
  content={item.year}
/>;

const [ItemFormatDate] = jsxBackend.all(['ui.ItemFormatDate']);
 
<ItemFormatDate
  value={'new Date()'}
  styles={styles}
  format="MMMM DD, yyyy"
  phrase="last_update_on_time"
/>;

const [ItemReactionBar] = jsxBackend.all(['ui.ItemReactionBar']);
 
<ItemReactionBar item={item} />;

const [ItemLocation] = jsxBackend.all(['ui.ItemLocation']);
 
<ItemLocation item={item} />;