@servicenow/sdk-build-plugins 4.4.0 → 4.5.0

package/src/service-portal/portal-plugin.ts

@@ -0,0 +1,319 @@
+import { Plugin, CallExpressionShape, type Record, type Shape } from '@servicenow/sdk-build-core'
+import { NowIdShape } from '../now-id-plugin'
+import { createSdkDocEntry } from '../utils'
+
+function convertToNumber(value: Shape, defaultValue: number = 0): number {
+    if (!value || value.isUndefined() || value.ifString()?.isEmpty()) {
+        return defaultValue
+    }
+    return value.toNumber()?.getValue() ?? defaultValue
+}
+
+export const ServicePortalPlugin = Plugin.create({
+    name: 'ServicePortalPlugin',
+    docs: [createSdkDocEntry('ServicePortal', ['sp_portal'])],
+    records: {
+        sp_portal: {
+            relationships: {
+                m2m_sp_portal_search_source: {
+                    descendant: true,
+                    via: 'sp_portal',
+                },
+                m2m_sp_portal_knowledge_base: {
+                    descendant: true,
+                    via: 'sp_portal',
+                },
+                m2m_sp_portal_catalog: {
+                    descendant: true,
+                    via: 'sp_portal',
+                },
+                m2m_sp_portal_taxonomy: {
+                    descendant: true,
+                    via: 'sp_portal',
+                },
+            },
+            toShape(record, { descendants }) {
+                // Handle search sources
+                const searchSources = descendants.query('m2m_sp_portal_search_source').map((m2m) => {
+                    return {
+                        searchSource: m2m.get('sp_search_source'),
+                        order: convertToNumber(m2m.get('order'), 100),
+                    }
+                })
+
+                // Handle knowledge bases
+                const knowledgeBases = descendants
+                    .query('m2m_sp_portal_knowledge_base')
+                    .filter((m2m) => !m2m.get('kb_knowledge_base')?.ifString()?.isEmpty())
+                    .map((m2m) => {
+                        return {
+                            knowledgeBase: m2m.get('kb_knowledge_base'),
+                            order: convertToNumber(m2m.get('order'), 100),
+                            active: m2m.get('active')?.isUndefined()
+                                ? undefined
+                                : m2m.get('active')?.toBoolean()?.getValue(),
+                        }
+                    })
+
+                // Handle catalogs
+                const catalogs = descendants
+                    .query('m2m_sp_portal_catalog')
+                    .filter((m2m) => !m2m.get('sc_catalog')?.ifString()?.isEmpty())
+                    .map((m2m) => {
+                        return {
+                            catalog: m2m.get('sc_catalog'),
+                            order: convertToNumber(m2m.get('order'), 100),
+                            active: m2m.get('active')?.isUndefined()
+                                ? undefined
+                                : m2m.get('active')?.toBoolean()?.getValue(),
+                        }
+                    })
+
+                // Handle taxonomies
+                const taxonomies = descendants.query('m2m_sp_portal_taxonomy').map((m2m) => {
+                    return {
+                        taxonomy: m2m.get('taxonomy'),
+                        order: convertToNumber(m2m.get('order'), 100),
+                        active: m2m.get('active')?.isUndefined()
+                            ? undefined
+                            : m2m.get('active')?.toBoolean()?.getValue(),
+                    }
+                })
+
+                const portalRecord = new CallExpressionShape({
+                    source: record,
+                    callee: 'ServicePortal',
+                    args: [
+                        record.transform(({ $ }) => ({
+                            $id: $.val(NowIdShape.from(record)),
+                            title: $,
+                            urlSuffix: $.from('url_suffix').def(''),
+                            icon: $.from('icon').def(''),
+                            logo: $.from('logo').def(''),
+                            logoAltText: $.from('logo_alt_text').def(''),
+                            quickStartConfig: $.from('quick_start_config').def(''),
+                            embeddableMacroponents: $.from('embeddable_macroponents').def(''),
+                            communicationChannels: $.from('communication_channels').def(''),
+                            cssVariables: $.from('css_variables').def(''),
+                            theme: $.from('theme').def(''),
+                            darkTheme: $.from('dark_theme').def(''),
+                            mainMenu: $.from('sp_rectangle_menu').def(''),
+                            categoryHomePage: $.from('sc_category_page').def(''),
+                            homePage: $.from('homepage').def(''),
+                            searchResultsConfiguration: $.from('search_results_configuration').def(''),
+                            searchApplication: $.from('search_application').def(''),
+                            alternatePortal: $.from('alternate_portal').def(''),
+                            catalogHomePage: $.from('sc_catalog_page').def(''),
+                            loginPage: $.from('login_page').def(''),
+                            knowledgeHomePage: $.from('kb_knowledge_page').def(''),
+                            chatQueue: $.from('sp_chat_queue').def(''),
+                            notFoundPage: $.from('notfound_page').def(''),
+                            textIndexGroup: $.from('ts_index_group').def(''),
+                            enableAiSearch: $.from('enable_ais').toBoolean().def(false),
+                            enableCertificateBasedAuthentication: $.from('enable_certificate_based_authentication')
+                                .toBoolean()
+                                .def(false),
+                            defaultPortal: $.from('default').toBoolean().def(false),
+                            enableWebEmbeddables: $.from('enable_embeddables').toBoolean().def(false),
+                            enableFavorites: $.from('enable_favorites').toBoolean().def(false),
+                            inactive: $.from('inactive').toBoolean().def(false),
+                            hidePortalName: $.from('hide_portal_name').toBoolean().def(false),
+                            supportRightToLeftLanguages: $.from('rtl_enabled').toBoolean().def(false),
+                            searchSources: $.val(searchSources).def([]),
+                            knowledgeBases: $.val(knowledgeBases).def([]),
+                            catalogs: $.val(catalogs).def([]),
+                            taxonomies: $.val(taxonomies).def([]),
+                        })),
+                    ],
+                })
+
+                return {
+                    success: true,
+                    value: portalRecord,
+                }
+            },
+        },
+        m2m_sp_portal_search_source: {
+            coalesce: ['sp_portal', 'sp_search_source'],
+        },
+        m2m_sp_portal_knowledge_base: {
+            coalesce: ['sp_portal', 'kb_knowledge_base'],
+        },
+        m2m_sp_portal_catalog: {
+            coalesce: ['sp_portal', 'sc_catalog'],
+        },
+        m2m_sp_portal_taxonomy: {
+            coalesce: ['sp_portal', 'taxonomy'],
+        },
+    },
+    shapes: [
+        {
+            shape: CallExpressionShape,
+            fileTypes: ['fluent'],
+            async toRecord(callExpression, { factory, diagnostics }) {
+                if (callExpression.getCallee() !== 'ServicePortal') {
+                    return { success: false }
+                }
+                const portalArgs = callExpression.getArgument(0).asObject()
+
+                const urlSuffix = portalArgs.get('urlSuffix').ifString()
+                if (urlSuffix) {
+                    const raw = urlSuffix.getValue()
+                    let normalized = raw.toLowerCase().replace(/[^a-zA-Z0-9_]/g, '_')
+                    while (normalized.indexOf('__') !== -1) {
+                        normalized = normalized.replace(/__/g, '_')
+                    }
+                    while (normalized !== '' && normalized.charAt(normalized.length - 1) === '_') {
+                        normalized = normalized.substring(0, normalized.length - 1)
+                    }
+                    if (raw !== normalized) {
+                        diagnostics.error(
+                            urlSuffix.getOriginalNode(),
+                            `Invalid url_suffix '${raw}'. Use lowercase alphanumeric and single underscores only (e.g. '${normalized}')`
+                        )
+                    }
+                }
+                // Extract first catalog and knowledgeBase from arrays to populate portal fields
+                const catalogsForM2M = portalArgs.get('catalogs')?.ifArray()?.getElements() ?? []
+                const knowledgeBasesForM2M = portalArgs.get('knowledgeBases')?.ifArray()?.getElements() ?? []
+                const firstCatalogFromArray =
+                    catalogsForM2M.length > 0 ? catalogsForM2M[0]?.asObject()?.get('catalog') : undefined
+                const firstKnowledgeBaseFromArray =
+                    knowledgeBasesForM2M.length > 0
+                        ? knowledgeBasesForM2M[0]?.asObject()?.get('knowledgeBase')
+                        : undefined
+
+                // Build portal properties with conditional catalog and knowledgeBase
+                const baseProperties = portalArgs.transform(({ $ }) => ({
+                    title: $,
+                    url_suffix: $.from('urlSuffix').def(''),
+                    icon: $.from('icon'),
+                    logo: $.from('logo'),
+                    logo_alt_text: $.from('logoAltText'),
+                    quick_start_config: $.from('quickStartConfig'),
+                    embeddable_macroponents: $.from('embeddableMacroponents'),
+                    communication_channels: $.from('communicationChannels'),
+                    css_variables: $.from('cssVariables'),
+                    theme: $.from('theme'),
+                    dark_theme: $.from('darkTheme'),
+                    sp_rectangle_menu: $.from('mainMenu'),
+                    sc_category_page: $.from('categoryHomePage'),
+                    homepage: $.from('homePage'),
+                    search_results_configuration: $.from('searchResultsConfiguration'),
+                    search_application: $.from('searchApplication'),
+                    alternate_portal: $.from('alternatePortal'),
+                    sc_catalog_page: $.from('catalogHomePage'),
+                    sc_catalog: $.val(firstCatalogFromArray),
+                    kb_knowledge_base: $.val(firstKnowledgeBaseFromArray),
+                    login_page: $.from('loginPage'),
+                    kb_knowledge_page: $.from('knowledgeHomePage'),
+                    sp_chat_queue: $.from('chatQueue'),
+                    notfound_page: $.from('notFoundPage'),
+                    ts_index_group: $.from('textIndexGroup'),
+                    enable_ais: $.from('enableAiSearch').def(false),
+                    enable_certificate_based_authentication: $.from('enableCertificateBasedAuthentication').def(false),
+                    default: $.from('defaultPortal').def(false),
+                    enable_embeddables: $.from('enableWebEmbeddables').def(false),
+                    enable_favorites: $.from('enableFavorites').def(false),
+                    inactive: $.from('inactive').def(false),
+                    hide_portal_name: $.from('hidePortalName').def(false),
+                    rtl_enabled: $.from('supportRightToLeftLanguages').def(false),
+                }))
+
+                const portalRecord = await factory.createRecord({
+                    source: callExpression,
+                    table: 'sp_portal',
+                    explicitId: portalArgs.get('$id'),
+                    properties: baseProperties,
+                })
+
+                // Handle search sources
+                const searchSources = portalArgs.get('searchSources')?.ifArray()?.getElements() ?? []
+
+                const searchSourceRecords: Record[] = []
+                for (const source of searchSources) {
+                    const sourceObj = source.asObject()
+                    const searchSourceRecord = await factory.createRecord({
+                        source: callExpression,
+                        table: 'm2m_sp_portal_search_source',
+                        properties: {
+                            sp_portal: portalRecord,
+                            sp_search_source: sourceObj.get('searchSource'),
+                            order: convertToNumber(sourceObj.get('order'), 100),
+                        },
+                    })
+                    searchSourceRecords.push(searchSourceRecord)
+                }
+
+                // Handle knowledge bases
+
+                const knowledgeBaseRecords: Record[] = []
+                for (const kb of knowledgeBasesForM2M) {
+                    const kbObj = kb.asObject()
+                    const knowledgeBaseRecord = await factory.createRecord({
+                        source: callExpression,
+                        table: 'm2m_sp_portal_knowledge_base',
+                        properties: {
+                            sp_portal: portalRecord,
+                            kb_knowledge_base: kbObj.get('knowledgeBase'),
+                            order: convertToNumber(kbObj.get('order'), 100),
+                            active: kbObj.get('active')?.isUndefined()
+                                ? true
+                                : kbObj.get('active').toBoolean().getValue(),
+                        },
+                    })
+                    knowledgeBaseRecords.push(knowledgeBaseRecord)
+                }
+
+                // Handle catalogs
+                const catalogRecords: Record[] = []
+                for (const cat of catalogsForM2M) {
+                    const catObj = cat.asObject()
+                    const catalogRecord = await factory.createRecord({
+                        source: callExpression,
+                        table: 'm2m_sp_portal_catalog',
+                        properties: {
+                            sp_portal: portalRecord,
+                            sc_catalog: catObj.get('catalog'),
+                            order: convertToNumber(catObj.get('order'), 100),
+                            active: catObj.get('active')?.isUndefined()
+                                ? true
+                                : catObj.get('active').toBoolean().getValue(),
+                        },
+                    })
+                    catalogRecords.push(catalogRecord)
+                }
+
+                // Handle taxonomies
+                const taxonomies = portalArgs.get('taxonomies')?.ifArray()?.getElements() ?? []
+                const taxonomyRecords: Record[] = []
+                for (const tax of taxonomies) {
+                    const taxObj = tax.asObject()
+                    const taxonomyRecord = await factory.createRecord({
+                        source: callExpression,
+                        table: 'm2m_sp_portal_taxonomy',
+                        properties: {
+                            sp_portal: portalRecord,
+                            taxonomy: taxObj.get('taxonomy'),
+                            order: convertToNumber(taxObj.get('order'), 100),
+                            active: taxObj.get('active')?.isUndefined()
+                                ? true
+                                : taxObj.get('active').toBoolean().getValue(),
+                        },
+                    })
+                    taxonomyRecords.push(taxonomyRecord)
+                }
+
+                return {
+                    success: true,
+                    value: portalRecord.with(
+                        ...searchSourceRecords,
+                        ...knowledgeBaseRecords,
+                        ...catalogRecords,
+                        ...taxonomyRecords
+                    ),
+                }
+            },
+        },
+    ],
+})

package/src/service-portal/theme-plugin.ts

@@ -0,0 +1,135 @@
+import { CallExpressionShape, Plugin } from '@servicenow/sdk-build-core'
+import { NowIdShape } from '../now-id-plugin'
+import { DEFAULT_ORDER, getIncludeRecords } from './utils'
+import { createSdkDocEntry } from '../utils'
+
+export const SPThemePlugin = Plugin.create({
+    name: 'SPThemePlugin',
+    docs: [createSdkDocEntry('SPTheme', ['sp_theme'])],
+    records: {
+        sp_theme: {
+            relationships: {
+                m2m_sp_theme_js_include: { via: 'sp_theme', descendant: true },
+                m2m_sp_theme_css_include: { via: 'sp_theme', descendant: true },
+            },
+            toShape(record, { descendants }) {
+                const cssIncludeRecords = descendants.query('m2m_sp_theme_css_include')
+                const cssIncludes = cssIncludeRecords
+                    .map((m2m) => {
+                        const orderValue = m2m.get('order')
+                        const order =
+                            (orderValue?.ifString()?.isEmpty() ? undefined : orderValue?.toNumber()?.getValue()) ??
+                            DEFAULT_ORDER
+                        return {
+                            order,
+                            include: m2m.get('sp_css_include'),
+                        }
+                    })
+                    .sort((a, b) => a.order - b.order)
+
+                const jsIncludeRecords = descendants.query('m2m_sp_theme_js_include')
+                const jsIncludes = jsIncludeRecords
+                    .map((m2m) => {
+                        const orderValue = m2m.get('order')
+                        const order =
+                            (orderValue?.ifString()?.isEmpty() ? undefined : orderValue?.toNumber()?.getValue()) ??
+                            DEFAULT_ORDER
+                        return {
+                            order,
+                            include: m2m.get('sp_js_include'),
+                        }
+                    })
+                    .sort((a, b) => a.order - b.order)
+
+                const themeOptions = record.transform(({ $ }) => ({
+                    $id: $.val(NowIdShape.from(record)),
+                    name: $,
+                    customCss: $.from('css_variables').def(''),
+                    header: $.def(''),
+                    footer: $.def(''),
+                    fixedHeader: $.from('navbar_fixed').toBoolean().def(true),
+                    fixedFooter: $.from('footer_fixed').toBoolean().def(true),
+                    turnOffScssCompilation: $.from('turn_off_scss_compilation').toBoolean().def(false),
+                    matchingNextExperienceTheme: $.from('matching_now_experience_theme').def(''),
+                    cssIncludes: $.val(cssIncludes.length > 0 ? cssIncludes : undefined),
+                    jsIncludes: $.val(jsIncludes.length > 0 ? jsIncludes : undefined),
+                    icon: $.def(''),
+                    logo: $.def(''),
+                    logoAltText: $.from('logo_alt_text').def(''),
+                }))
+
+                return {
+                    success: true,
+                    value: new CallExpressionShape({
+                        source: record,
+                        callee: 'SPTheme',
+                        args: [themeOptions],
+                    }),
+                }
+            },
+        },
+        m2m_sp_theme_css_include: {
+            coalesce: ['sp_css_include', 'sp_theme'],
+        },
+        m2m_sp_theme_js_include: {
+            coalesce: ['sp_js_include', 'sp_theme'],
+        },
+    },
+    shapes: [
+        {
+            shape: CallExpressionShape,
+            fileTypes: ['fluent'],
+            async toRecord(callExpression, { diagnostics, factory }) {
+                if (callExpression.getCallee() !== 'SPTheme') {
+                    return { success: false }
+                }
+
+                const theme = callExpression.getArgument(0).asObject()
+
+                const themeRecord = await factory.createRecord({
+                    source: callExpression,
+                    table: 'sp_theme',
+                    explicitId: theme.get('$id'),
+                    properties: theme.transform(({ $ }) => ({
+                        name: $,
+                        css_variables: $.from('customCss').def(''),
+                        header: $,
+                        footer: $,
+                        navbar_fixed: $.from('fixedHeader').def(true),
+                        footer_fixed: $.from('fixedFooter').def(true),
+                        turn_off_scss_compilation: $.from('turnOffScssCompilation').def(false),
+                        matching_now_experience_theme: $.from('matchingNextExperienceTheme').def(''),
+                        icon: $,
+                        logo: $,
+                        logo_alt_text: $.from('logoAltText').def(''),
+                    })),
+                })
+
+                const cssIncludes = await getIncludeRecords(
+                    theme.get('cssIncludes'),
+                    themeRecord.getId(),
+                    factory,
+                    'm2m_sp_theme_css_include',
+                    'sp_css_include',
+                    'sp_theme',
+                    diagnostics
+                )
+
+                const jsIncludes = await getIncludeRecords(
+                    theme.get('jsIncludes'),
+                    themeRecord.getId(),
+                    factory,
+                    'm2m_sp_theme_js_include',
+                    'sp_js_include',
+                    'sp_theme',
+                    diagnostics
+                )
+
+                return {
+                    success: true,
+                    value: themeRecord.with(...cssIncludes, ...jsIncludes),
+                }
+            },
+        },
+    ],
+})

package/src/service-portal/utils.ts

@@ -0,0 +1,69 @@
+import { NowIncludeShape } from '../now-include-plugin'
+import { type Record, Shape, type RecordId, type Diagnostics, type Factory } from '@servicenow/sdk-build-core'
+
+/**
+ * Creates a NowIncludeShape with a custom file path suffix and extension
+ */
+export async function createIncludeShape(
+    record: Record,
+    content: string | Shape,
+    suffix: string,
+    extension: 'js' | 'html' | 'scss',
+    folderName: string
+): Promise<NowIncludeShape> {
+    const baseName = `sp_widget_${folderName}`
+    const includedText = content instanceof Shape ? content.toString().getValue() : content
+
+    return new NowIncludeShape({
+        source: record,
+        path: `./${baseName}/${suffix}.${extension}`,
+        includedText,
+    })
+}
+
+export const DEFAULT_ORDER = 100
+
+export async function getIncludeRecords(
+    shape: Shape,
+    parentId: Shape,
+    factory: Factory,
+    m2mTable: string,
+    includeTable: string,
+    parentTable: string,
+    diagnostics: Diagnostics
+) {
+    return (
+        await Promise.all(
+            shape?.ifArray()?.map(async (include) => {
+                const includeProps = include.ifObject()?.get('include')
+
+                let includeId: string | RecordId
+                if (includeProps?.isString()) {
+                    includeId = includeProps.toString().getValue()
+                } else if (includeProps?.isRecord()) {
+                    includeId = includeProps.getId()
+                } else {
+                    const necessaryPlugin = includeTable === 'sp_js_include' ? 'JsInclude' : 'CssInclude'
+                    diagnostics.error(
+                        includeProps!,
+                        `include must contain a valid ${necessaryPlugin}, Record<'${includeTable}'> or sys_id'`
+                    )
+                    return undefined
+                }
+
+                const m2mProps = {
+                    [includeTable]: includeId,
+                    [parentTable]: parentId,
+                }
+                return await factory.createRecord({
+                    source: shape,
+                    table: m2mTable,
+                    properties: {
+                        order: include.ifObject()?.get('order').asNumber().getValue() || DEFAULT_ORDER,
+                        ...m2mProps,
+                    },
+                })
+            }) ?? []
+        )
+    ).filter((rec) => rec) as Record[]
+}

package/src/service-portal/widget-plugin.ts

@@ -3,9 +3,24 @@ import { noThrow, reverseObject } from '../utils'
 import { type SPTemplate, WidgetCategories } from '@servicenow/sdk-core/runtime/service-portal'
 import { NowIdShape } from '../now-id-plugin'
 import { NowIncludeShape } from '../now-include-plugin'
+import { createSdkDocEntry } from '../utils'
+import { createIncludeShape } from './utils'
+
+function convertOptionSchemaKeys(optionSchema: unknown, convertKey: (key: string) => string): unknown {
+    if (!Array.isArray(optionSchema)) {
+        return optionSchema
+    }
+    return optionSchema.map((option: Record<string, unknown>) =>
+        Object.fromEntries(Object.entries(option).map(([k, v]) => [convertKey(k), v]))
+    )
+}
+
+const toCamelCase = (key: string) => key.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())
+const toSnakeCase = (key: string) => key.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`)
 
 export const SPWidgetPlugin = Plugin.create({
     name: 'SPWidgetPlugin',
+    docs: [createSdkDocEntry('SPWidget', ['sp_widget'])],
     records: {
         sp_widget: {
             relationships: {
@@ -13,7 +28,10 @@ export const SPWidgetPlugin = Plugin.create({
                 m2m_sp_ng_pro_sp_widget: { via: 'sp_widget', descendant: true },
                 sp_ng_template: { via: 'sp_widget', descendant: true },
             },
-            toShape(record, { descendants }) {
+            async toShape(record, { descendants }) {
+                const folderName =
+                    record.get('id')?.asString()?.getValue()?.replace(/[\s-]/g, '_') ||
+                    record.get('name')?.asString()?.getValue()?.toLowerCase().replace(/[\s-]/g, '_')
                 const dependencies = descendants.query('m2m_sp_widget_dependency')
                 const angularProviders = descendants.query('m2m_sp_ng_pro_sp_widget')
                 const templates = descendants.query('sp_ng_template').map((template) => {
@@ -25,7 +43,29 @@ export const SPWidgetPlugin = Plugin.create({
                 })
 
                 const category = reverseObject(WidgetCategories)[record.get('category').ifString()?.getValue() || '']
-
+                const serverScript = await createIncludeShape(
+                    record,
+                    record.get('script'),
+                    'server_script',
+                    'js',
+                    folderName
+                )
+                const clientScript = await createIncludeShape(
+                    record,
+                    record.get('client_script'),
+                    'client_script',
+                    'js',
+                    folderName
+                )
+                const css = await createIncludeShape(record, record.get('css'), 'style', 'scss', folderName)
+                const htmlTemplate = await createIncludeShape(
+                    record,
+                    record.get('template'),
+                    'template',
+                    'html',
+                    folderName
+                )
+                const linkScript = await createIncludeShape(record, record.get('link'), 'link-script', 'js', folderName)
                 return {
                     success: true,
                     value: new CallExpressionShape({
@@ -36,11 +76,11 @@ export const SPWidgetPlugin = Plugin.create({
                                 $id: $.val(NowIdShape.from(record)),
                                 name: $,
                                 category: $.val(category).def('custom'),
-                                clientScript: $.from('client_script').def(''),
-                                serverScript: $.from('script').def(''),
+                                clientScript: $.val(clientScript).def(''),
+                                serverScript: $.val(serverScript).def(''),
                                 controllerAs: $.from('controller_as').def('c'),
-                                htmlTemplate: $.from('template').def(''),
-                                customCss: $.from('css').def(''),
+                                htmlTemplate: $.val(htmlTemplate).def(''),
+                                customCss: $.val(css).def(''),
                                 dataTable: $.from('data_table').def('sp_instance'),
                                 demoData: $.from('demo_data')
                                     .map((d) => {
@@ -61,7 +101,7 @@ export const SPWidgetPlugin = Plugin.create({
                                 hasPreview: $.from('has_preview').toBoolean().def(false),
                                 id: $.def(''),
                                 internal: $.toBoolean().def(false),
-                                linkScript: $.from('link').def(''),
+                                linkScript: $.val(linkScript).def(''),
                                 roles: $.map((role) => {
                                     const roleStr = role.ifString()?.getValue()
                                     return roleStr && roleStr.split(',')
@@ -71,7 +111,8 @@ export const SPWidgetPlugin = Plugin.create({
                                     .map((v) => {
                                         const json = v.ifString()?.getValue()
                                         const parsed = noThrow(() => json && JSON.parse(json))
-                                        return parsed instanceof Error ? json : parsed
+                                        const result = parsed instanceof Error ? json : parsed
+                                        return convertOptionSchemaKeys(result, toCamelCase)
                                     })
                                     .def(''),
                                 public: $.toBoolean().def(false),
@@ -133,6 +174,34 @@ export const SPWidgetPlugin = Plugin.create({
                     )
                 }
 
+                const clientScript = widget.get('clientScript')
+                const clientScriptValue =
+                    clientScript instanceof NowIncludeShape
+                        ? clientScript.getValue()
+                        : clientScript.ifString()?.getValue()
+                if (clientScriptValue && clientScriptValue.trim().length > 0) {
+                    const clientScriptPattern =
+                        /^(function|api\.controller\s?=\s?function)\s?([$a-z_][$0-9a-z_]*)?\s?\(.*\)\s?\n?{/i
+                    if (!clientScriptPattern.test(clientScriptValue.trim())) {
+                        diagnostics.error(
+                            clientScript.getOriginalNode(),
+                            `Client controller must contain a JavaScript function. Example: api.controller = function($scope) { ... }`
+                        )
+                    }
+                }
+
+                const htmlTemplate = widget.get('htmlTemplate')
+                const htmlTemplateValue =
+                    htmlTemplate instanceof NowIncludeShape
+                        ? htmlTemplate.getValue()
+                        : htmlTemplate.ifString()?.getValue()
+                if (htmlTemplateValue && htmlTemplateValue.length > 0 && htmlTemplateValue.indexOf('href="#"') > 0) {
+                    diagnostics.error(
+                        htmlTemplate.getOriginalNode(),
+                        `Do not use href="#" in the Service Portal, use href="javascript:void(0)" instead`
+                    )
+                }
+
                 const roles = widget
                     .get('roles')
                     .ifArray()
@@ -200,7 +269,8 @@ export const SPWidgetPlugin = Plugin.create({
                         option_schema: $.from('optionSchema')
                             .map((v) => {
                                 const json = v.getValue()
-                                return json && JSON.stringify(json)
+                                const converted = convertOptionSchemaKeys(json, toSnakeCase)
+                                return converted && JSON.stringify(converted)
                             })
                             .def(''),
                         public: $.def(false),